- 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) }
