Flutter如何实现WebView与JavaScript的交互

在Flutter中如何实现WebView与JavaScript的双向通信？具体需要哪些步骤和代码示例？比如怎样从Flutter调用WebView中的JS函数，以及如何在WebView中触发Flutter端的方法？另外，使用官方webview_flutter插件时有哪些需要注意的兼容性问题？

2 回复

Flutter中通过webview_flutter插件实现WebView与JavaScript交互。使用JavascriptChannel接收JS消息，runJavascript或evaluateJavascript执行JS代码。双向通信需在WebView中注入JS接口。

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


在Flutter中，可以通过webview_flutter插件实现WebView与JavaScript的交互，支持双向通信。以下是具体实现步骤和代码示例：

1. 添加依赖

在pubspec.yaml中添加：

dependencies:
  webview_flutter: ^4.4.2

2. 基本交互实现

WebView 调用 JavaScript

使用WebViewController的runJavaScript方法：

final controller = WebViewController()
  ..loadRequest(Uri.parse('https://example.com'))
  ..setJavaScriptMode(JavaScriptMode.unrestricted);

// 执行JS代码
controller.runJavaScript('alert("Hello from Flutter!")');

JavaScript 调用 Flutter

通过addJavaScriptChannel注册通道：

controller.addJavaScriptChannel(
  'FlutterBridge', // JS中调用的对象名
  onMessageReceived: (message) {
    // 接收来自JS的消息
    print('JS发送的数据: ${message.message}');
  },
);

// 在HTML/JS中调用：
// FlutterBridge.postMessage('Hello from JS!');

3. 完整示例

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

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

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

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadFlutterAsset('assets/sample.html') // 加载本地HTML
      ..addJavaScriptChannel(
        'FlutterBridge',
        onMessageReceived: (message) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text('JS消息: ${message.message}')),
          );
        },
      );
  }

  // 向JS发送数据
  void _sendToJS() {
    controller.runJavaScript('receiveFromFlutter("来自Flutter的数据")');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView JS交互'),
        actions: [
          IconButton(
            icon: Icon(Icons.send),
            onPressed: _sendToJS,
          )
        ],
      ),
      body: WebViewWidget(controller: controller),
    );
  }
}

4. 本地HTML示例（assets/sample.html）

<!DOCTYPE html>
<html>
<body>
  <button onclick="sendToFlutter()">发送到Flutter</button>
  <script>
    function sendToFlutter() {
      // 调用Flutter通道
      FlutterBridge.postMessage('Hello from JS!');
    }
    
    // 接收Flutter调用的函数
    function receiveFromFlutter(data) {
      alert('收到Flutter数据: ' + data);
    }
  </script>
</body>
</html>

关键点说明

  1. 权限配置（Android/iOS）：

    • Android：确保AndroidManifest.xml有网络权限
    • iOS：在Info.plist中配置<key>NSAppTransportSecurity</key>

  2. 通信安全：

    • 验证JS消息来源
    • 避免执行不可信的JS代码

  3. 注意事项：

    • 确保WebView完全加载后再执行JS（可在onPageFinished回调中操作）
    • 复杂数据结构建议使用JSON格式传递

这种方案可以实现完整的双向通信，适用于需要Web和原生功能混合的场景。

回到顶部