Flutter: Two-way Communication with JS in WebView

[hhstore]

related:

• [x] xxx
• [x] xxx

[hhstore]

Flutter 在 WebView 中与 JS 双向通信:

• webview 插件有两个:
  • https://pub.dev/packages/webview_flutter
  • https://pub.dev/packages/flutter_inappwebview
• 官方插件质量比较差.
• 两个库使用上, 在 js 中的写法, 有差异.

浏览器标准 api 支持: window.postMessage()

• web api 标准:
• window.postMessage() 方法可以安全地实现跨源通信
• https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
• https://juejin.cn/post/6844903665694687240

JSBridge: WebView 在原生 iOS/Android 下

• https://www.jianshu.com/p/8765ed68a8a2
• https://juejin.cn/post/6844903602440388622
• https://zhuanlan.zhihu.com/p/139510850
• https://juejin.cn/post/6844903567665397768
• https://diamantidis.github.io/2020/02/02/two-way-communication-between-ios-wkwebview-and-web-page

JSBridge: WebView + Flutter

• https://juejin.cn/post/6844904197599526925

ref:

• https://juejin.cn/post/6844903811488677901

  • 使用 webview_flutter

• https://www.freecodecamp.org/news/how-to-build-a-native-communication-bridge-in-flutter-with-webview-and-javascript/

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

  • 使用 flutter_inappwebview

[hhstore]

使用 webview_flutter:

方式1: javascriptChannels

• flutter 中 JavascriptChannel中的 name, 要与 JS 中的name.postMessage()相对应
• in js:

<button onclick="callFlutter()">callFlutter</button>

function callFlutter(){
   Toast.postMessage("JS调用了Flutter");
}

• in flutter:

JavascriptChannel _alertJavascriptChannel(BuildContext context) {
    return JavascriptChannel(
        name: 'Toast',
        onMessageReceived: (JavascriptMessage message) {
          showToast(message.message);
        });
  }

WebView(
    javascriptChannels: <JavascriptChannel>[
        _alertJavascriptChannel(context),
    ].toSet(),
;

方式2: 使用路由委托navigationDelegate拦截url

• in js:

<button onclick="callFlutter()">callFlutter</button>

function callFlutter(){
  /*约定的url协议为：js://webview?arg1=111&arg2=222*/
  document.location = "js://webview?arg1=111&args2=222";
}

• in flutter:

navigationDelegate: (NavigationRequest request) {
            if (request.url.startsWith('js://webview')) {
              showToast('JS调用了Flutter By navigationDelegate');
              print('blocking navigation to $request}');
              return NavigationDecision.prevent;
            }
            print('allowing navigation to $request');
            return NavigationDecision.navigate;
          },

flutter 执行 js:

• in js:

  <p id="p1" style="visibility:hidden;">
    Flutter 调用了 JS.
    Flutter 调用了 JS.
    Flutter 调用了 JS.
  </p>

function callJS(message){
  document.getElementById("p1").style.visibility = message;
}

• in flutter:

onWebViewCreated: (WebViewController webViewController) {
    _controller = webViewController;
},
······
floatingActionButton: FloatingActionButton(
        onPressed: () {
          _controller
              ?.evaluateJavascript('callJS("visible")')
              ?.then((result) {
                  // You can handle JS result here.
              });
        },
        child: Text('call JS'),
      ),

[hhstore]

1

[hhstore]

1