Question

我正在使用webview_flutter pacakge，在此Web视图中，其中显示了蔬菜，商品等物品的小册子，当您单击小册子中的物品时，它将弹出它的详细信息，这是应用程序中的功能，所以我想做的是，我可以使用flutter webview在应用程序中显示宣传册，但是当我单击某个项目时，它会调用js函数showAndroidToast(id)并调用该函数并返回一些数据，它可以正常工作android应用程序，因此我们正在将应用程序复制到ios的flutter中，但是当我单击项目时，我无法访问它返回以下错误的功能

我在创建Webview时遇到错误

D/WebView (16639): evaluateJavascript=showAndroidToast()
I/chromium(16639): [INFO:CONSOLE(1)] "Uncaught ReferenceError: showAndroidToast is not defined", source: https://flyerbin.com/flyer/pick-of-the-day-3398 (1)

我点击小册子中的项目后出现错误

I/BufferQueueProducer(16639): [SurfaceTexture-0-16639-4](this:0x9924e000,id:4,api:1,p:255,c:16639) queueBuffer: fps=3.65 dur=1097.05 max=742.36 min=33.99
I/chromium(16639): [INFO:CONSOLE(1)] "ReferenceError: webkit is not defined", source: https://assets.flyerbin.com/public/1602490675000/js/api.js (1)

服务器中的Js功能

代码

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';


class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  WebViewController _controller;
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: WebView(
        initialUrl: 'https://example.com',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;

          _controller.loadUrl('${baseUrl}flyer/$flyer_id');
        },
        onPageFinished: (String url) {
          _controller?.evaluateJavascript('showAndroidToast("Android")')?.then((result) {
         
            print("data" + result);
          });
        },
      ),
    );
  }
}

Answer 1

最后弄清楚了，您需要使用javascript中的其他条件才能访问数据波动

使用javascript通道的Webview可以访问js函数，对于flutter那里访问数据，js函数有很小的变化，我在这里做了什么，如果键是Flutter，它将返回被单击项的ID。< / p>

网络视图

WebView(
            initialUrl: 'https://example.com/',
            javascriptMode: JavascriptMode.unrestricted,
            javascriptChannels: Set.from([
              JavascriptChannel(
                  name: "Flutter",
                  onMessageReceived: (JavascriptMessage message) {
                    getSingleItem(message.message);
                  }),
            
            ]),
            onWebViewCreated: (WebViewController webViewController) {
              _controller = webViewController;
              _controller.loadUrl('${Urls.baseUrl}flyer/${flyer_id}');
            },
            onPageFinished: (finish)  {
              setState(() {
                isLoading = false;
              });
            },
            gestureNavigationEnabled: true,

          ),

将数据用于其他功能

void getSingleItem(String id) async{

in this function you can do whatever you want,means that with data we got from the javascript function you can show a data to alert box with flutter...etc

}

JavaScript功能的变化

Answer 2

有什么方法可以调用postMessage并将数据从dart代码返回到js吗？

例如：

var x = Print.postMessage('Hello World being called from Javascript code'); 
alert(x);

从webiew fletch获取js函数并返回数据

2 个答案: