提问人:Endor 提问时间:9/18/2023 最后编辑:Endor 更新时间:9/18/2023 访问量:143
使用 postMessage 将两个 String 从 js 发送到 Flutter
Use postMessage to sent two Strings from js to Flutter
问:
我在 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 来做到这一点,但我想使用纯飞镖来达到目标。
答:
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部分
评论