Flutter如何实现与WebView的交互

我在Flutter项目中需要实现与WebView的交互，具体需求是通过Flutter调用WebView中的JavaScript方法，同时也要能在WebView中触发Flutter端的回调。目前尝试了webview_flutter插件，但不太清楚如何双向通信：

  1. Flutter如何向WebView中的页面注入并执行JS代码？
  2. WebView中的JS如何调用Flutter端的方法？
  3. 有没有完整的交互示例代码可以参考？

最好能说明下Android和iOS平台是否需要区别处理，以及如何处理跨平台兼容性问题。

2 回复

Flutter中通过webview_flutter插件实现与WebView交互。使用JavascriptChannel接收WebView消息，通过WebViewController执行JavaScript代码，实现双向通信。

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


在Flutter中，可以通过 webview_flutter 插件实现与WebView的交互，主要包括从Flutter调用JavaScript代码，以及从WebView向Flutter发送消息。

1. 基本设置

首先添加依赖：

dependencies:
  webview_flutter: ^4.4.2

2. 主要交互方式

Flutter调用JavaScript

使用WebViewController的runJavaScript()方法：

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

// 调用JS函数
controller.runJavaScript('alert("Hello from Flutter")');

// 获取返回值
final result = await controller.runJavaScriptReturningResult('1+1');
print(result); // 输出: 2

JavaScript调用Flutter

  1. 启用JavaScript，设置回调：
controller
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..addJavaScriptChannel(
    'Flutter',
    onMessageReceived: (JavaScriptMessage message) {
      print('收到来自JS的消息: ${message.message}');
    },
  );
  1. 在WebView中通过Flutter对象发送消息：
// 在Web页面的JS代码中
Flutter.postMessage('Hello from JavaScript');

3. 完整示例

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

class WebViewExample extends StatefulWidget {
  const WebViewExample({super.key});

  @override
  State<WebViewExample> createState() => _WebViewExampleState();
}

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

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse('https://example.com'))
      ..addJavaScriptChannel(
        'Flutter',
        onMessageReceived: (JavaScriptMessage message) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text('JS说: ${message.message}')),
          );
        },
      );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('WebView交互示例'),
        actions: [
          IconButton(
            icon: const Icon(Icons.send),
            onPressed: () async {
              await controller.runJavaScript('alert("来自Flutter的消息")');
            },
          ),
        ],
      ),
      body: WebViewWidget(controller: controller),
    );
  }
}

注意事项

  • 确保WebView页面加载完成后再执行JS代码
  • 处理可能的通信错误
  • iOS需要在Info.plist中配置网络权限

这种双向通信机制可以让你在Flutter和WebView之间灵活地传递数据和调用功能。

回到顶部