使用 postMessage 将两个 String 从 js 发送到 Flutter

Use postMessage to sent two Strings from js to Flutter

提问人:Endor 提问时间:9/18/2023 最后编辑:Endor 更新时间:9/18/2023 访问量:143

问:

我在 Flutter 中使用 webview_flutter,我用它来显示 html。我可以使用以下 js 代码将 String 传输到 Flutter: JS:

function test()
{
    alert("xxxxx");
    window.jsBridge.postMessage("test name");
}

扑动:

return Scaffold(
      appBar: AppBar(
        title: Text('Webview Example'),
      ),
      body: WebView(
        // 加载html文件夹下的test.html
        initialUrl: 'file:///android_asset/flutter_assets/html/test.html',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (controller) async{
          _webViewController = controller;
          // var s = await _webViewController.evaluateJavascript(
          //     'window.addEventListener("message", (event,event1) => {Toaster.postMessage(JSON.stringify(event.data,event1.data));}, false);');
          // print(s);
        },
        onPageFinished: (url) async{
          try {
            var s = await _webViewController.runJavascript(
                'window.addEventListener("message", (event) => {jsBridge.postMessage(JSON.stringify(event.data));}, false);');
          } on Exception catch (e) {
            // TODO
          }
          // print(s);
        },
        javascriptChannels: {
          JavascriptChannel(
              name: 'jsBridge',
              onMessageReceived: (message) {
                print('jsBridge : ${message.message}');
              })
        },
      ),
    );

但!这段代码只能传输一个 String,有些 html 页面需要传输两个 String,如下所示:

window.jsBridge.postMessage("test name","test data");

如果传输两个字符串,我无法从 Flutter 获得任何消息。

现在我对此感到困惑,你能帮我吗?

顺便说一句,我无法编辑html代码,因为所有网站都传输两个字符串。我只能编辑 Flutter 部分。

我尝试使用 Android java 来做到这一点,但我想使用纯飞镖来达到目标。

JavaScript Flutter PostMessage AppsFlyer

评论


答:

1赞 Hadi Tanoomand 9/18/2023 #1

要使用 webview_flutter 包将多个字符串从 JavaScript 传递给 Flutter,你仍然可以使用 window.jsBridge.postMessage 方法,但你需要将数据打包成一个 JSON 字符串,然后在 Flutter 中解析它以提取单个值。这是你如何做到的:

修改 JavaScript 代码以发送 JSON 字符串: JavaScript的

function test() {
  var data = {
    name: "test name",
    data: "test data"
  };
  window.jsBridge.postMessage(JSON.stringify(data));
}

在 Flutter 代码中,解析 JSON 字符串以提取值: 飞镖

import 'dart:convert';

// ...

JavascriptChannel(
  name: 'jsBridge',
  onMessageReceived: (message) {
    try {
      Map<String, dynamic> data = jsonDecode(message.message);
      String name = data['name'];
      String dataString = data['data'];
      print('Name: $name, Data: $dataString');
    } catch (e) {
      print('Error parsing JSON: $e');
    }
  },
)

现在,当你在 JavaScript 中使用多个值调用 window.jsBridge.postMessage 时,你向 Flutter 发送了一个 JSON 字符串,而在 Flutter 中,你可以解析这个 JSON 字符串以根据需要提取单个值。

评论

1赞 Endor 9/18/2023
谢谢。但是我不能编辑html代码,只能调整Flutter部分