在Flutter中如何实现WebView与JavaScript的双向通信？

在Flutter中如何实现WebView与JavaScript的双向通信？具体有哪些方法可以使用，比如JavaScriptChannel、evaluateJavascript等？不同方法的优缺点和适用场景是什么？通信过程中常见的问题有哪些，比如跨域限制、异步调用等，应该如何解决？能否提供一个完整的代码示例，展示从Flutter调用JS函数以及从JS回调Flutter的流程？另外，在性能和安全方面有哪些需要注意的地方？

3 回复

Flutter WebView与JS通信主要通过两个方向：Flutter调JS和JS调Flutter。

  1. Flutter调JS： 使用flutter_inappwebview插件，在WebView加载完成后注入JS代码。比如：
await webViewController?.evaluateJavascript(
    javascriptCodeAsAString: 'alert("Hello from Flutter");'
);
  1. JS调Flutter：
    • 使用flutter_webview_plugin时，需监听URL变化捕获JS的postMessage。
    • 推荐使用flutter_inappwebview，其支持addJavascriptInterface绑定对象：
      webViewController?.addJavascriptInterface(
    JavascriptChannel(
        name: 'FlutterChannel',
        onMessageReceived: (message) {
            print(message.message); // 处理JS消息
        }
    ),
    'flutter'
);
      JS端可调用window.flutter.post('Hello from JS')发送消息。

注意事项：

  • 两边通信需注意数据格式，通常用JSON。
  • Android需开启JavaScript支持。
  • iOS需配置App Transport Security(ATS)或白名单。

更多关于在Flutter中如何实现WebView与JavaScript的双向通信？的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，使用WebView与JavaScript通信可以通过flutter_webview_plugin或webview_flutter插件实现。

  1. 通过flutter_webview_plugin：

    • 使用evalJavascript方法执行JS代码。
    • 示例：
      final WebViewController _controller = WebViewController()
  ..loadRequest(Uri.parse('https://example.com'))
  ..runJavascript("document.title")
  ..setOnWebViewCreated((controller) {
    controller.runJavascript("alert('Hello from Flutter!')");
  });

  2. 通过webview_flutter：

    • 通过addJavaScriptHandler注册处理函数。
    • 示例：
      WebView(
  initialUrl: 'https://example.com',
  javascriptMode: JavascriptMode.unrestricted,
  onWebViewCreated: (WebViewController webViewController) {
    webViewController.addJavascriptChannel(
      'Toaster',
      onMessageReceived: (message) {
        print(message);
      },
    );
  },
);
    • 在JS端调用：Toaster.postMessage('Hello from JS!')

  3. 注意事项：

    • 确保WebView的javascriptMode设置为unrestricted。
    • 数据传递需注意JSON格式化，避免复杂对象传递。
    • Android和iOS的WebView实现略有差异，需测试兼容性。

Flutter WebView与JavaScript通信主要通过webview_flutter插件实现双向交互，以下是核心方法和示例代码：

  1. Flutter调用JavaScript
// 初始化WebView
WebViewController _controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..loadRequest(Uri.parse('https://example.com'));

// 调用JS方法
_controller.runJavaScript('alert("Hello from Flutter")');
  1. JavaScript调用Flutter
// 设置JavaScript通道
_controller.addJavaScriptChannel(
  'FlutterBridge',
  onMessageReceived: (message) {
    print('JS传来的消息: ${message.message}');
  }
);

// 对应JS代码
window.FlutterBridge.postMessage('Hello from JS');
  1. 双向通信完整示例
WebViewWidget(
  controller: WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..addJavaScriptChannel('FlutterBridge', 
      onMessageReceived: (message) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('JS说: ${message.message}'))
        );
      }
    )
    ..loadRequest(Uri.parse('https://example.com'))
);

关键点：

  1. 必须启用JavaScriptMode.unrestricted
  2. 通信是异步的，需妥善处理时序问题
  3. WebView加载完成后才能安全通信（可在onPageFinished回调中操作）

安全建议：

  • 验证JS消息来源
  • 避免传递敏感数据
  • 限制可调用方法范围

常见问题解决：

  1. 通信失败时检查JS模式是否启用
  2. 确保WebView完全加载后再通信
  3. 跨平台差异需测试（Android/iOS/web）
回到顶部