Flutter [webview_flutter] javascriptChannels 如何与端口一起工作？答案

【问题标题】：Flutter [webview_flutter] How do javascriptChannels work with ports?Flutter [webview_flutter] javascriptChannels 如何与端口一起工作？
【发布时间】：2022-12-04 12:50:15
【问题描述】：

使用 flutter 插件：webview_flutter

所有从 JS 发送数据到 webview_flutter 的例子都有类似的语法：

网页：

<script>
 toFlutter.postMessage('{"name":"Hello World"}');
</script>

扑：

javascriptChannels: { 
   JavascriptChannel( 
       name: 'toFlutter', 
       onMessageReceived: (message) async { 
           print('Javascript: "${message.message}"'); 
       }, 
   ), 
 },

这行得通，除了......现在如果在网络浏览器中查看该网页会给我一个 JS 错误。（防止其他JS运行）

javascriptChannel 的正确 (javascript) 语法似乎是这样的：

<script>
 var toFlutter = new MessageChannel(); 
 toFlutter.port1.postMessage('{"name":"Hello World"}'); 
</script>

这在网络浏览器中有效，但现在 webview_flutter 当然不高兴了。

显然有办法解决这个问题，我只是问：我错过了文档中的某些内容吗？有没有办法在 webview_flutter 中同时指定通道名称和端口？

【问题讨论】：

面对类似的问题，请告诉我您是否能够解决？

标签： flutter dart webview-flutter

【解决方案1】：

这篇文章应该有帮助：

https://medium.com/flutter-community/flutter-webview-javascript-communication-inappwebview-5-403088610949

简而言之：它显示了 3 种与 JS 代码通信的方法。其中之一就像 iFrame 一样使用消息通道。

这样你就可以重用几乎相同的结构形成你的 html-targeted dart 代码。

【讨论】：