Flutter WebView（新版本）中移除网站header-bottom标签方法咨询

你的代码存在两个核心问题导致无法隐藏目标元素：

• JavaScript执行时机过早：页面还未加载完成就调用runJavaScript，此时DOM中还不存在header-bottom元素，自然无法定位并修改它。
• 配置顺序错误：setJavaScriptMode(JavaScriptMode.unrestricted)必须在执行JavaScript之前设置，否则WebView的JavaScript支持还未启用，代码无法生效。

以下是修正后的完整代码，同时加入了错误处理和动态元素兼容方案：

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

class Homepage extends StatefulWidget {
  const Homepage({super.key});

  @override
  State<Homepage> createState() => _HomepageState();
}

class _HomepageState extends State<Homepage> {
  late WebViewController webViewController;

  @override
  void initState() {
    super.initState();
    initWebViewController();
  }

  void initWebViewController() {
    webViewController = WebViewController()
      // 先启用JavaScript支持
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      // 设置导航代理，监听页面加载完成事件
      ..setNavigationDelegate(
        NavigationDelegate(
          onPageFinished: (String url) {
            // 页面加载完成后执行隐藏逻辑
            webViewController.runJavaScript('''
              // 优先尝试直接查找并隐藏静态元素
              const headerBottom = document.querySelector('header-bottom');
              if (headerBottom) {
                headerBottom.style.display = 'none';
                // 若需要完全移除元素，可替换为：headerBottom.remove();
              }

              // 兼容动态生成的元素（比如通过React/Vue渲染的元素）
              const observer = new MutationObserver((mutations) => {
                const dynamicHeaderBottom = document.querySelector('header-bottom');
                if (dynamicHeaderBottom) {
                  dynamicHeaderBottom.style.display = 'none';
                  observer.disconnect(); // 找到元素后停止监听，避免性能消耗
                }
              });

              // 监听整个文档的DOM变化
              observer.observe(document.documentElement, {
                childList: true,
                subtree: true
              });

              // 如需同时隐藏header标签，可添加以下代码
              const header = document.querySelector('header');
              if (header) {
                header.style.display = 'none';
              }
            ''');
          },
        ),
      )
      // 最后加载目标页面
      ..loadRequest(Uri.parse('https://auctionwind.com'));
  }

  @override
  Widget build(BuildContext context) {
    return WebViewWidget(controller: webViewController);
  }
}

关键说明： #

1. onPageFinished回调：确保只有在页面完全加载完成后才执行JavaScript，此时DOM元素已经生成。
2. 错误处理：通过if判断元素是否存在，避免找不到元素时抛出JS异常。
3. MutationObserver监听：针对动态渲染的元素（比如页面通过前端框架异步生成的header-bottom），监听DOM变化，一旦元素出现就立即隐藏。

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