Flutter WebView如何移除页眉页脚？旧方法因版本升级失效

针对webview_flutter库升级后旧方法失效的问题，下面是适配新版本的可行实现方案：

核心要点 #

新版本的webview_flutter对JS相关API做了调整，必须满足两个前提才能成功隐藏元素：

1. 开启JavaScript支持
2. 等待页面DOM完全加载后再执行隐藏元素的JS代码

修改后的完整代码 #

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

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

  @override
  State<SportybetTips> createState() => _SportybetTipsState();
}

class _SportybetTipsState extends State<SportybetTips> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      // 必须启用JavaScript，否则无法执行隐藏元素的代码
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      // 监听页面加载完成事件，确保DOM已渲染
      ..setNavigationDelegate(NavigationDelegate(
        onPageFinished: (String url) {
          _hidePageElements();
        },
      ))
      ..loadRequest(Uri.parse('https://accessbettingtips.com/sportybet/'));
  }

  // 执行JS代码隐藏页眉和页脚
  void _hidePageElements() {
    // 隐藏header标签对应的元素
    controller.runJavaScript("""
      const header = document.getElementsByTagName('header')[0];
      if (header) header.style.display = 'none';
    """);
    // 隐藏footer标签对应的元素
    controller.runJavaScript("""
      const footer = document.getElementsByTagName('footer')[0];
      if (footer) footer.style.display = 'none';
    """);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sportybet Betting Tips'),
      ),
      body: WebViewWidget(controller: controller),
    );
  }
}

关键说明 #

• 旧代码里的evaluateJavascript已经被废弃，新版本改用runJavaScript执行无返回值的JS代码
• 必须通过setJavaScriptMode开启JS权限，否则所有JS代码都会被屏蔽
• 一定要在onPageFinished回调里执行隐藏逻辑，否则页面还没加载完成，找不到对应的header/footer元素
• 添加空值判断可以避免页面没有对应元素时出现JS报错，提升稳定性

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