Flutter Webview与Java双向通信 [英] Flutter Webview two way communication with Javascript

问题描述

我有一个使用flutter_webview_plugin在Flutter Webview中加载的html文件.我正在使用evalJavascript在我的javascript代码中调用函数，这意味着flutter(dart)-> js.但是，我还需要某种方法将某些内容传达回flutter(dart)层，这意味着js-> flutter(dart).

I have an html file that I am loading in Flutter webview using flutter_webview_plugin. I am using evalJavascript to call function in my javascript code, meaning flutter(dart)->js. However, I also need some way to communicate back something to flutter(dart) layer, meaning js->flutter(dart).

我尝试使用 -webkit.messageHandlers.native -window.native 支持两个平台(Android，iOS)，检查它们是否在JS中可用.但是，这些是未定义的.使用以下代码获取JS中本机处理程序的实例.

I have tried using - webkit.messageHandlers.native - window.native to support both platforms(Android,iOS) checking if those are available in JS. But, those comes as undefined. Using following code to get instance of native handler in JS.

typeof webkit !== 'undefined' ? webkit.messageHandlers.native : 
window.native;

即使我得到该实例并使用它发布消息，也不确定如何在flutter(dart)层中处理它.我可能需要使用平台渠道.不确定我的方向是否正确.

And even if I get that instance and post message using it, not sure how to handle it in flutter(dart) layer. I may need to use platform channels. Not sure, if I am in the right direction.

有什么办法可以做到这一点?我已经评估了Interactive_webview插件.它在Android上运行良好.但是，它存在快速的版本控制问题，因此不希望进一步进行.

Is there any way through which I can do that? I have evaluated interactive_webview plugin. It works fine on Android. But, it has swift versioning issue and don't want to proceed further with that.

任何帮助将不胜感激.

推荐答案

这里是一个从Javascript代码到Flutter的通信示例.

Here is an example of communication from Javascript code to flutter.

在Flutter中，像这样构建您的WebView:

In Flutter build your WebView like :

WebView(
              initialUrl: url,
              javascriptMode: JavascriptMode.unrestricted,
              javascriptChannels: Set.from([
                JavascriptChannel(
                    name: 'Print',
                    onMessageReceived: (JavascriptMessage message) {
                      //This is where you receive message from 
                      //javascript code and handle in Flutter/Dart
                      //like here, the message is just being printed
                      //in Run/LogCat window of android studio
                      print(message.message);
                    })
              ]),
              onWebViewCreated: (WebViewController w) {
                webViewController = w;
              },
            )

并在您的HTML文件中:

and in Your HTMLfile:

<script type='text/javascript'>
    Print.postMessage('Hello World being called from Javascript code');
</script>

运行此代码时，您将能够在android studio的LogCat/Run窗口中看到日志"正在从Javascript代码调用Hello World ".

When you run this code, you shall be able to see log "Hello World being called from Javascript code" in the LogCat/Run window of android studio.

这篇关于Flutter Webview与Java双向通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！