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

问题描述

我有一个 html 文件，我正在使用 flutter_webview_plugin 在 Flutter webview 中加载它.我正在使用 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窗口中看到日志Hello World is called from Javascript code".

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 与 Javascript 的双向通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！