Flutter WebView JavaScript通信

2023-09-24 06:35:38

在本文中，我将介绍如何使用我的flutter_inappwebview插件（在撰写本文时，最新版本是5.3.2）在Dart（Flutter WebView）和JavaScript之间进行通信。

关键词

引言

Flutter WebView JavaScript通信是构建交互式Flutter应用程序的关键方面。它允许您从Dart调用JavaScript函数，并从JavaScript接收回调。通过使用flutter_inappwebview插件，您可以轻松实现这些功能。

Dart到JavaScript通信

要从Dart调用JavaScript函数，您可以使用evaluateJavascript方法。该方法接受一个字符串参数，该参数包含要调用的JavaScript代码。例如：

final webView = InAppWebView(
  initialUrl: "https://example.com",
  onWebViewCreated: (controller) {
    controller.evaluateJavascript(source: "alert('Hello from Dart!');");
  },
);

JavaScript到Dart通信

要从JavaScript接收回调，您可以使用addJavaScriptHandler方法。该方法接受一个字符串参数，该参数包含JavaScript处理程序的名称，以及一个JavaScript回调参数，该回调将接收传入的数据。例如：

window.addEventListener('message', function(event) {
  if (event.data && event.data.type === 'callback') {
    console.log('Received callback from Dart: ' + event.data.message);
  }
});

final webView = InAppWebView(
  initialUrl: "https://example.com",
  onWebViewCreated: (controller) {
    controller.addJavaScriptHandler(handlerName: 'callback', callback: (args) {
      print('Received callback from JavaScript: ' + args[0].toString());
    });
  },
);

异步通信

要实现异步通信，您可以使用callAsyncJavaScript方法。该方法接受一个字符串参数，该参数包含要调用的JavaScript代码，以及一个JavaScript回调参数，该回调将接收传入的数据。例如：

final webView = InAppWebView(
  initialUrl: "https://example.com",
  onWebViewCreated: (controller) {
    controller.callAsyncJavaScript(source: "asyncFunction();", callback: (args) {
      print('Received async callback from JavaScript: ' + args[0].toString());
    });
  },
);