在嵌入式 WebView 中设置 Dart 和 js 之间通信的通道

Posted 2023-02-23

【中文标题】在嵌入式 WebView 中设置 Dart 和 js 之间通信的通道

【英文标题】：Setting up a channel for communicating between Dart and js in an embedded WebView

【发布时间】：2019-05-25 23:41:26

【问题描述】：

需要在 OpenLayers 库之上构建具有地图功能的应用程序。这个应用程序是由两个平台（ios 和 android）上的本地语言构建的，并且运行良好。现在，我们希望迁移到 Flutter 以获得“代码一次”术语的好处。除了 Flutter 团队开发的 webview 插件，Flutter 似乎是最好的选择。不支持dart和js的通信:-(。也在社区里翻了一些插件，但没有找到合适的。有人有好的想法，请指教。非常感谢！

【参考方案1】：

我知道为时已晚，但它可能对其他人有所帮助。

这是一个从 javascript 代码到 Flutter 的通信示例。

在 Flutter 中构建您的 WebView，如下所示：

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 文件中：

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

当你运行这段代码时，你应该能够在 android studio 的 LogCat/Run 窗口中看到日志“Hello World being called from Javascript code”

如果您想将 msg 从 dart 发送到 js，那么这里是您的示例：-

 flutterWebviewPlugin.evalJavascript('var x = document.getElementsByClassName("layout__area--top"); x[0].style.opacity =0;');