如何在Flutter WebView（移动应用内嵌网页）中拦截广告

以下是可直接落地的三类实现方案：

方案1：基于webview_flutter原生层自定义拦截 #

该方案可以复用你找到的安卓原生广告拦截库的规则逻辑，同时补充iOS端的对应实现：

安卓侧配置 #

• 提取原生广告拦截库的广告域名黑名单、资源路径匹配规则，存入安卓项目的assets目录
• 自定义webview_flutter的安卓端宿主实现，重写shouldInterceptRequest方法，所有请求先匹配广告规则，命中则直接返回204空响应拦截请求
• 配置WebSetting属性setJavaScriptCanOpenWindowsAutomatically = false，禁止JS未经用户触发自动打开新窗口，从根源拦截绝大多数弹窗广告

iOS侧配置 #

• 同步使用安卓侧的广告规则，在iOS端实现WKNavigationDelegate的decidePolicyForNavigationAction方法，拦截所有命中广告规则的请求
• 配置WKWebView属性configuration.preferences.javaScriptCanOpenWindowsAutomatically = false，关闭自动弹窗权限

方案2：使用flutter_inappwebview插件自带拦截能力 #

该插件相比官方webview_flutter提供了更丰富的请求拦截API，可快速实现广告拦截：

• 初始化时配置通用广告拦截规则，通过ContentBlocker直接生效
• 示例实现代码：

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("你的视频流服务URL")),
  initialSettings: InAppWebViewSettings(
    javaScriptCanOpenWindowsAutomatically: false,
    useShouldInterceptRequest: true,
  ),
  shouldInterceptRequest: (controller, request) async {
    // 匹配广告规则，命中则返回空响应
    if (adBlockRuleSet.contains(request.url?.host) || adBlockRuleSet.contains(request.url?.path)) {
      return WebResourceResponse(data: Uint8List(0), mimeType: "", statusCode: 204);
    }
    return null;
  },
)

方案3：注入JS脚本拦截前端触发的广告 #

对于页面前端逻辑生成的弹窗和广告元素，可通过注入JS脚本直接拦截：

WebView(
  initialUrl: "你的视频流服务URL",
  javascriptMode: JavascriptMode.unrestricted,
  onPageStarted: (controller, url) async {
    await controller.evaluateJavascript('''
      // 拦截window.open调用，阻止新弹窗生成
      window.open = () => null;
      // 可选：拦截alert/confirm类系统弹窗
      window.alert = window.confirm = window.prompt = () => true;
      // 定时清理页面内带广告特征的DOM元素
      setInterval(() => {
        document.querySelectorAll('[id*="ad"], [class*="ad"], .ad-popup, .float-ad').forEach(el => el.remove());
      }, 300);
    ''');
  },
)

注意：配置拦截规则前建议先抓包获取视频流站点的广告请求特征，避免误拦截正常的视频流资源请求，影响播放功能。

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