Flutter中，html 与 dart 桥接沟通

当前有两种webview的插件，分别是：

• webview_flutter
• flutter_inappwebview

webview_flutter

dart 调用 html 方法

dart

其实就是dart向html发送消息，使用webViewController.runJavaScript方法，执行一段js脚本。

// 使用 postMessage 发送
webViewController.runJavaScript('''
window.postMessage($message, '*');
''');

若为map，需要先转换为json字符串，避免引号冲突。

html

const handleMessage = (event: MessageEvent) => {
const data = event.data
// 解析消息内容...
}

// 添加窗口消息监听器
window.addEventListener('message', handleMessage)

html 调用 dart 方法

dart

通过JavaScriptChannel，来实现监听html发送的消息的功能。

先向页面添加 JavaScriptChannel

//添加 JavaScript 通道用于接收 H5 消息
webViewController.addJavaScriptChannel('FlutterChannel',
onMessageReceived: (JavaScriptMessage message) {
handleH5Message(message.message); // 这就是处理html发送的消息的方法
});

html

这里的 FlutterChannel 是在dart端通过addJavaScriptChannel方法添加的，在网页端不需要声明。

// 使用 FlutterChannel 通道发送消息（匹配 Flutter 端的 JavaScriptChannel）
try {
if ((window as any).FlutterChannel) {
(window as any).FlutterChannel.postMessage(JSON.stringify(message))
console.log('通过 FlutterChannel 发送消息到 Flutter:', message)
} else {
console.warn('FlutterChannel 未定义，无法发送消息到 Flutter')
}
} catch (error) {
console.error('发送到 Flutter 失败:', error)
}

flutter_inappwebview

dart 调用 html 方法

dart

其实就是dart向html发送消息，使用webViewController.evaluateJavascript方法，执行一段js脚本。

// 使用 postMessage 发送
webViewController?.evaluateJavascript(
source: "window.postMessage($value, '*');",
);

若为map，需要先转换为json字符串，避免引号冲突。

html

const handleMessage = (event: MessageEvent) => {
const data = event.data
// 解析消息内容...
}

// 添加窗口消息监听器
window.addEventListener('message', handleMessage)

html 调用 dart 方法

dart

通过JavaScriptChannel，来实现监听html发送的消息的功能。

先向页面添加 JavaScriptChannel

// 添加 JavaScript Handler 用于接收 H5 消息
webViewController!.addJavaScriptHandler(
handlerName: 'FlutterChannel', // <--- 这个需要和 html 中的 handlerName 一致
callback: (message) {
if (message.isEmpty) {
return;
}
handleH5Message(message[0]);
},
);

html

这里的 FlutterChannel 是在dart端通过addJavaScriptChannel方法添加的，在网页端不需要声明。

// 使用 flutter_inappwebview 通道发送消息（匹配 Flutter 端的 JavaScriptChannel）
try {
if ((window as any).flutter_inappwebview) {
// 调用 Dart 端的 handlerName 并发送数据
(window as any).flutter_inappwebview.callHandler('FlutterChannel', message)
console.log('use flutter_inappwebview send to Flutter:', message)
} else {
console.warn('flutter_inappwebview undefine')
}
} catch (error) {
console.error('Send to Flutter failed: ', error)
}