Flutter WebView问题：执行JavaScript无法更新Web视图

核心问题分析 #

你的代码里有几个关键问题导致JS无法生效：

1. 多余的javascript:前缀：Flutter的runJavascript方法不需要这个伪协议头，直接传入纯JS代码即可，加了反而会导致代码执行异常。
2. 链式DOM获取过于脆弱：一旦链式调用中某个节点不存在（比如元素还没渲染、类名变化），整个脚本会抛出错误终止执行，没有容错处理。
3. 不必要的setState：onPageFinished里调用setState对WebView的内容没有任何影响，反而会触发组件重新build，完全多余。

修复后的代码 #

class CoreWebScreen extends StatefulWidget {
  const CoreWebScreen({
    Key? key,
    required this.url,
  }) : super(key: key);
  final String url;

  @override
  State<CoreWebScreen> createState() => _CoreWebScreenState();
}

class _CoreWebScreenState extends State<CoreWebScreen> {
  WebViewController? _webViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebView(
        initialUrl: widget.url,
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _webViewController = webViewController;
        },
        onPageFinished: (page) async {
          await _webViewController?.runJavascript(_removeHeader());
        },
      ),
    );
  }

  String _removeHeader() {
    // 改用querySelector简化选择，增加存在性判断避免报错
    return r'''
      (function() {
        const headerElement = document.querySelector('#root .f1e663 ._060cef');
        if (headerElement) {
          headerElement.style.display = 'none';
        }
      })();
    ''';
  }
}

额外排查点 #

如果修复后还是不生效，可能是页面内容动态加载导致的：onPageFinished触发时，目标元素还没被渲染出来。这种情况可以用以下两种方式处理：

• 延迟执行示例：

  await Future.delayed(const Duration(milliseconds: 500));
  await _webViewController?.runJavascript(_removeHeader());
  

• 用MutationObserver监听DOM变化（更可靠）：
  修改_removeHeader方法为：

  (function() {
    const observer = new MutationObserver((mutations) => {
      const headerElement = document.querySelector('#root .f1e663 ._060cef');
      if (headerElement) {
        headerElement.style.display = 'none';
        observer.disconnect(); // 找到元素后停止监听
      }
    });
    // 监听root节点的子元素变化
    observer.observe(document.getElementById('root'), {
      childList: true,
      subtree: true
    });
  })();
  

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