如何通过webview_flutter从Flutter调用网页自定义JS函数？

要调用WebView网页里的自定义JavaScript函数，比如helloWord()，直接使用WebViewController提供的runJavascript或runJavascriptReturningResult方法即可，以下是具体实现：

基础调用示例 #

首先确保你已经持有WebViewController的实例（通常在WebView的onWebViewCreated回调中获取），然后在需要触发的时机执行：

// 假设已获取WebViewController实例，命名为_webViewController
void triggerHelloWord() async {
  try {
    // 调用网页中的helloWord()函数
    await _webViewController.runJavascript('helloWord();');
  } catch (e) {
    print('调用自定义JS函数失败: $e');
  }
}

传递参数的情况 #

如果自定义函数需要接收参数，直接在JS代码字符串中传入即可：

// 调用带参数的helloWord('来自Flutter的消息')
await _webViewController.runJavascript('helloWord("来自Flutter的消息");');

获取函数返回值 #

如果需要获取自定义JS函数的返回结果，使用runJavascriptReturningResult方法：

void getHelloWordResult() async {
  try {
    String result = await _webViewController.runJavascriptReturningResult('helloWord();');
    print('JS函数返回结果: $result');
  } catch (e) {
    print('获取返回结果失败: $e');
  }
}

注意事项 #

• 必须等待网页加载完成后再调用函数，建议在WebView的onPageFinished回调之后执行，避免出现"函数未定义"的错误。
• 如果JS函数名或参数包含特殊字符，注意对字符串进行正确转义。

内容的提问来源于stack exchange，提问作者Rory Prince