如何在Flutter WebViewWidget中调用JavaScript方法（webview_flutter插件）

在webview_flutter 4.x及以上版本中，WebViewController的evaluateJavascript方法已被移除，替代方法是runJavaScript。你只需要修改onPageFinished回调中的代码即可实现需求：

修改步骤 #

• 在NavigationDelegate的onPageFinished回调中，调用webViewController.runJavaScript()方法执行目标JS代码
• 确保已开启JavaScript支持（你代码中已设置JavaScriptMode.unrestricted，这是执行JS的必要前提）

修改后的完整代码 #

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

class WebViewScreen extends StatefulWidget {
  const WebViewScreen({
    Key? key,
  }) : super(key: key);

  @override
  State<WebViewScreen> createState() => _WebViewScreenState();
}

class _WebViewScreenState extends State<WebViewScreen> {
  @override
  void initState() {
    super.initState();
  }

  late WebViewController webViewController = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..setBackgroundColor(const Color(0x00000000))
    ..setNavigationDelegate(
      NavigationDelegate(
        onProgress: (int progress) {},
        onPageStarted: (String url) {},
        // 修改此处的onPageFinished回调
        onPageFinished: (String url) async {
          // 使用runJavaScript替代evaluateJavascript
          await webViewController.runJavaScript("alert('Hello World');");
        },
        onWebResourceError: (WebResourceError error) {},
        onNavigationRequest: (NavigationRequest request) {
          return NavigationDecision.navigate;
        },
      ),
    )
    ..loadRequest(Uri.parse('https://www.google.com/'));

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Expanded(
            child: WebViewWidget(
              controller: webViewController,
            ),
          ),
        ],
      ),
    );
  }
}

额外说明 #

• 如果需要获取JS执行的返回结果，可以使用runJavaScriptReturningResult()方法，该方法会返回Future<String?>类型的执行结果
• 建议保持webview_flutter依赖为最新稳定版，避免因版本差异导致的API不兼容问题

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