js与flutter webview如何实现交互

在开发一个混合应用时，我需要在Flutter的WebView中加载网页，并实现JavaScript与Flutter之间的双向通信。具体场景是网页中的按钮点击后需要调用Flutter的方法，同时Flutter也需要能主动执行网页中的JS函数。请问应该如何实现这种交互？是否有成熟的方案或插件推荐？需要注意哪些兼容性问题？

2 回复

JS与Flutter WebView交互主要通过webview_flutter插件实现：

Flutter调用JS方法：

controller.evaluateJavascript('javascriptFunction("参数")');

JS调用Flutter方法：

  1. 在Flutter中注册JS通道：
JavascriptChannel(
  name: 'FlutterChannel',
  onMessageReceived: (message) {
    // 处理来自JS的消息
  }
)
  1. 在JS中调用：
FlutterChannel.postMessage('数据');

双向通信流程：

  1. WebView加载完成后，通过evaluateJavascript注入JS桥接代码
  2. 设置消息监听，处理JS发来的请求
  3. 通过JS通道返回数据给WebView

注意事项：

  • 确保WebView完全加载后再执行JS
  • 注意数据类型转换（JSON序列化）
  • 处理通信异常和超时
  • iOS和Android可能有平台差异

这种方式可以实现完整的双向通信，比如传递用户数据、调用原生功能等。

更多关于js与flutter webview如何实现交互的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 JavaScript 与 Flutter WebView 之间实现交互，主要通过 webview_flutter 插件实现双向通信。以下是具体实现步骤和示例代码：

1. Flutter 调用 JavaScript

使用 WebViewController 的 runJavaScript 方法。

Flutter 端代码：

import 'package:webview_flutter/webview_flutter.dart';

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  late WebViewController controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebView(
        initialUrl: 'https://your-webpage.com',
        onWebViewCreated: (WebViewController webViewController) {
          controller = webViewController;
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          // 调用 JavaScript 函数
          await controller.runJavaScript('alert("Hello from Flutter!")');
        },
        child: Icon(Icons.call),
      ),
    );
  }
}

2. JavaScript 调用 Flutter

通过 JavaScriptChannel 接收 Web 端消息。

Flutter 端代码：

WebView(
  initialUrl: 'https://your-webpage.com',
  javascriptMode: JavascriptMode.unrestricted,
  onWebViewCreated: (WebViewController webViewController) {
    controller = webViewController;
  },
  javascriptChannels: <JavascriptChannel>{
    JavascriptChannel(
      name: 'FlutterBridge', // 通道名
      onMessageReceived: (JavascriptMessage message) {
        // 接收来自 JavaScript 的消息
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('JS 说: ${message.message}')),
        );
      },
    ),
  }.toSet(),
);

HTML/JavaScript 端代码：

<!DOCTYPE html>
<html>
<body>
  <button onclick="sendToFlutter()">点击调用 Flutter</button>
  <script>
    function sendToFlutter() {
      // 通过 FlutterBridge 通道发送消息
      FlutterBridge.postMessage('Hello from JavaScript!');
    }
  </script>
</body>
</html>

3. 双向通信示例

场景：Flutter 发送数据到 WebView，WebView 处理后再返回结果。

Flutter 端：

// 发送数据到 JS
await controller.runJavaScript('processData("Flutter Data")');

// 监听 JS 返回结果
JavascriptChannel(
  name: 'ResultHandler',
  onMessageReceived: (JavascriptMessage message) {
    print('JS 返回: ${message.message}');
  },
);

JavaScript 端：

function processData(data) {
  const result = `处理后的数据: ${data}`;
  // 将结果发送回 Flutter
  ResultHandler.postMessage(result);
}

注意事项

  1. 启用 JavaScript：确保 javascriptMode: JavascriptMode.unrestricted。
  2. 通道名一致：Flutter 的 JavascriptChannel 名称需与 JS 中的 window.通道名.postMessage 对应。
  3. 安全性：避免传输敏感数据，并对 JS 代码进行验证。

通过以上方法，即可实现 Flutter WebView 与 JavaScript 的高效交互。

回到顶部