Flutter Webview中evaluateJavascript执行JavaScript不生效问题求助

核心问题1：JS执行时机错误 #

你当前把JS代码放在onPageStarted回调中执行，这个回调是页面刚开始加载时触发，此时页面DOM树还未完成解析渲染，document.getElementsByTagName('main')根本获取不到对应元素，执行自然会报错失败。
正确的执行时机应该放在onPageFinished回调中，这个回调会在页面所有DOM资源加载完成后触发，此时才能正常获取到页面元素。

问题2：API使用存在兼容性问题 #

如果你使用的是webview_flutter: 3.0.0以上的版本，旧的evaluateJavascript方法已经被废弃，安卓端执行会直接失效，需要替换为新的runJavascript方法，如果需要获取JS执行返回值则用runJavascriptReturningResult。

问题3：Widget类型选择不当 #

你把WebViewController定义在无状态的StatelessWidget中，页面rebuild时容易出现控制器丢失、状态异常的问题，建议把MainScreen改为StatefulWidget，将控制器放在State类中管理。

问题4：JS代码缺乏容错处理 #

如果页面不存在main标签，直接访问数组下标[0]会抛出JS异常，建议增加判断逻辑避免报错。

// 首先把MainScreen改为StatefulWidget
class MainScreen extends StatefulWidget {
  const MainScreen({super.key});

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  late WebViewController _webController;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          children: [
            Expanded(
              child: WebView(
                javascriptMode: JavascriptMode.unrestricted,
                initialUrl: 'http://212.80.206.193/test.project-270.com/',
                debuggingEnabled: true,
                onWebViewCreated: (controller) {
                  _webController = controller;
                  _webController.clearCache();
                },
                // 把JS执行逻辑移到onPageFinished中
                onPageFinished: (url) async {
                  await _webController.runJavascript("""
                    const mainEle = document.getElementsByTagName('main')[0];
                    if(mainEle) mainEle.style.display = 'none';
                  """);
                },
                navigationDelegate: (NavigationRequest request) {
                  print(request.url);
                  if (request.url.contains("geo:")) {
                    launch(request.url);
                    return NavigationDecision.prevent;
                  } else {
                    return NavigationDecision.navigate;
                  }
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

如果修改后还是无法执行，可以开启WebView的调试模式，在Chrome浏览器地址栏输入chrome://inspect，连接你的设备后直接调试WebView页面，查看JS执行的具体报错信息，就能快速定位问题。

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