Flutter如何通过flutter_inappwebview与网页交互

我在Flutter项目中使用了flutter_inappwebview插件加载网页，但不知道如何实现与网页的双向交互。具体有几个问题想请教：

  1. 如何在Flutter中调用网页里的JavaScript函数？
  2. 网页中的JavaScript如何调用Flutter中的Dart方法？
  3. 有没有完整的代码示例展示两者之间的通信流程？
  4. 这种方式在iOS和Android上有什么需要注意的兼容性问题吗？

希望能得到详细指导，最好能提供一些实际应用场景下的解决方案。

2 回复

Flutter通过flutter_inappwebview与网页交互，主要使用JavaScript通道。在WebView中注册处理器，网页调用window.flutter_inappwebview.callHandler传递数据。Flutter端监听并响应，实现双向通信。

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


在Flutter中，使用flutter_inappwebview插件可以实现与网页的双向交互，包括从Flutter调用网页中的JavaScript函数，以及从网页向Flutter发送消息。

1. 基本设置

首先，在pubspec.yaml中添加依赖：

dependencies:
  flutter_inappwebview: ^6.0.0

然后执行flutter pub get。

2. Flutter调用网页JavaScript

通过InAppWebViewController的evaluateJavascript方法执行JS代码：

InAppWebViewController? webViewController;

// 调用网页中的函数
webViewController?.evaluateJavascript(
  source: "window.myJavaScriptFunction('Hello from Flutter!');"
);

// 获取网页返回值
var result = await webViewController?.evaluateJavascript(
  source: "document.title;"
);
print(result); // 输出网页标题

3. 网页调用Flutter方法

使用JavaScriptHandler接收网页消息：

// 在WebView初始化时添加处理器
InAppWebView(
  initialUrlRequest: URLRequest(url: WebUri('https://example.com')),
  onWebViewCreated: (controller) {
    webViewController = controller;
    
    // 添加JS处理器
    controller.addJavaScriptHandler(
      handlerName: 'flutterHandler',
      callback: (args) {
        // 接收来自网页的数据
        print('Received from web: ${args[0]}');
        return 'Response from Flutter';
      }
    );
  },
)

在网页中通过window.flutter_inappwebview.callHandler调用：

// 调用Flutter处理器并发送数据
window.flutter_inappwebview.callHandler('flutterHandler', 'Hello from Web!')
  .then(function(response) {
    console.log('Flutter response: ' + response);
  });

4. 完整示例

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

class _WebViewExampleState extends State<WebViewExample> {
  InAppWebViewController? webViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView交互示例'),
        actions: [
          IconButton(
            icon: Icon(Icons.refresh),
            onPressed: () async {
              // 调用网页函数
              await webViewController?.evaluateJavascript(
                source: "window.showAlert('Flutter发送的消息');"
              );
            },
          )
        ],
      ),
      body: Column(
        children: [
          Expanded(
            child: InAppWebView(
              initialUrlRequest: URLRequest(
                url: WebUri('https://your-website.com')
              ),
              onWebViewCreated: (controller) {
                webViewController = controller;
                controller.addJavaScriptHandler(
                  handlerName: 'fromWeb',
                  callback: (args) {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('网页消息: ${args[0]}'))
                    );
                    return {'status': 'success'};
                  }
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

关键点：

  • 使用evaluateJavascript从Flutter调用JS
  • 使用addJavaScriptHandler建立网页到Flutter的通道
  • 网页端通过flutter_inappwebview.callHandler调用Flutter方法
  • 支持双向数据传递（字符串、数字、对象等）

确保网页加载完成后再进行交互，可在onLoadStop回调中执行初始化操作。

回到顶部