Flutter Webview如何拦截广告，解决广告弹出无法获取页面元素的问题

问题根因 #

广告弹出时会动态修改页面DOM结构，部分场景还会插入iframe嵌套节点，你之前仅在页面加载完成后单次执行的元素查找逻辑，会因为DOM变化、元素被移动/隐藏、跨iframe无法访问等原因失效。

可落地解决方案 #

1. 用MutationObserver监听DOM变化，动态触发元素获取 #

不要仅在onPageFinished（安卓）/didFinishNavigation（iOS）回调里执行一次获取逻辑，注入JS脚本持续监听DOM变化，只要目标元素出现就立即提取URL回传：

// 注入WebView的JS脚本
const observer = new MutationObserver(() => {
  const targetVideo = document.querySelector('你的视频元素选择器');
  if (targetVideo?.src) {
    // 通过JS Channel回传地址
    window.yourJsInterface.sendVideoUrl(targetVideo.src);
    // 拿到后可断开监听避免重复触发
    observer.disconnect();
  }
});
// 监听整个body的所有DOM变化
observer.observe(document.body, {
  childList: true,
  subtree: true,
  attributes: true
});

2. 兼容iframe嵌套场景的元素查找 #

如果站点的视频或广告放在iframe节点内，顶层document无法直接跨节点获取元素，需要遍历所有同域iframe查找：

function getVideoUrl() {
  // 先查顶层文档
  let video = document.querySelector('你的视频元素选择器');
  if (video) return video.src;
  // 遍历所有iframe
  const iframes = document.querySelectorAll('iframe');
  for (const frame of iframes) {
    try {
      const frameDoc = frame.contentDocument || frame.contentWindow.document;
      video = frameDoc.querySelector('你的视频元素选择器');
      if (video) return video.src;
    } catch (err) {
      // 跨域iframe无访问权限，直接跳过
    }
  }
  return null;
}
// 把该方法放到MutationObserver的回调中调用即可

3. 网络请求拦截方案（稳定性最高） #

完全跳过DOM查找逻辑，直接在原生端拦截WebView的所有网络请求，匹配视频资源特征提取URL，不受任何页面元素变化的影响：

• 安卓端：重写WebViewClient的shouldInterceptRequest方法，匹配请求URL后缀（如.m3u8/.mp4/.flv）或者响应头的Content-Type为视频类型，符合条件直接提取URL
• iOS端：通过WKWebView的decidePolicyFor navigationAction回调匹配请求，或者使用自定义URLProtocol全局拦截视频请求

4. 屏蔽广告从根源避免问题 #

如果业务允许不展示广告，直接拦截广告请求避免DOM被修改：

• 维护广告域名黑名单，WebView加载时拦截所有黑名单域名的请求
• 注入CSS隐藏所有广告弹窗元素，示例：

.ad, .popup, .ad-modal, .advertisement {
  display: none !important;
  z-index: -999 !important;
}

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