UWP应用WebView视频广告拦截方案咨询：如何优化现有CSS隐藏方式？

嘿，你在UWP里用WebView加载第三方网页，已经通过注入CSS搞定了横幅广告隐藏，现在想解决烦人的视频广告问题对吧？确实Android WebView那套方案在UWP上完全不适用，得用UWP特有的方法来处理。我给你梳理两种靠谱的实现思路，你可以根据目标网站的情况选择：

方案一：拦截HTTP请求（从源头阻止广告加载） #

这个方法是直接在WebView发起请求的阶段，识别并拦截广告相关的资源请求，从根源上不让广告内容下载下来，既省流量又彻底。UWP的WebView提供了WebResourceRequested事件来做这件事，具体步骤如下：

1. 首先在WebView初始化时注册WebResourceRequested事件，同时确保启用JavaScript（你已经在注入CSS，应该已经开了，但还是提一下）；
2. 在事件处理函数里，用正则匹配请求的URI，判断是否是广告资源；
3. 如果匹配成功，返回一个空响应来阻止请求。

代码示例 #

// 在页面加载或WebView初始化时注册事件
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    webView.WebResourceRequested += WebView_WebResourceRequested;
    // 确保启用JavaScript（必要前提）
    webView.DefaultWebViewSettings.IsJavaScriptEnabled = true;
}

private void WebView_WebResourceRequested(WebView sender, WebViewWebResourceRequestedEventArgs args)
{
    // 这里可以根据目标网站的广告链接特征调整正则规则，比如常见的广告域名、后缀
    var adRegexPatterns = new List<string>
    {
        @"ad\.", @"ads\.", @"advertisement", @"adserver", @"video-ad", @"\.ad\.mp4", @"adcdn\."
    };
    string requestUrl = args.Request.RequestUri.ToString();

    foreach (var pattern in adRegexPatterns)
    {
        if (System.Text.RegularExpressions.Regex.IsMatch(requestUrl, pattern, System.Text.RegularExpressions.RegexOptions.IgnoreCase))
        {
            // 返回空响应，阻止广告资源加载
            args.Response = new HttpResponseMessage(System.Net.HttpStatusCode.NoContent);
            return;
        }
    }
}

方案二：注入JavaScript拦截广告（结合你现有的CSS注入方式） #

既然你已经在用InvokeScriptAsync注入CSS，那可以用同样的方式注入JS，直接在页面层面删除广告视频元素、阻止广告脚本执行。这种方式更灵活，适合广告元素有明显标识的场景。

代码示例（扩展你现有的注入逻辑） #

// 页面加载完成后执行注入（建议绑定到NavigationCompleted事件）
private async void WebView_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
{
    // 先注入你的自定义CSS
    await InjectCustomCss();
    // 再注入广告拦截的JS
    await InjectAdBlockJavaScript();
}

// 你原有的CSS注入函数
private async Task InjectCustomCss()
{
    string cssInjectScript = @"
        let link = document.createElement('link'); 
        link.rel = 'stylesheet'; 
        link.type = 'text/css'; 
        link.href = 'ms-appx-web:///MyCss.css'; 
        document.getElementsByTagName('head')[0].appendChild(link);
    ";
    await webView.InvokeScriptAsync("eval", new string[] { cssInjectScript });
}

// 新增的广告拦截JS注入函数
private async Task InjectAdBlockJavaScript()
{
    string adBlockScript = @"
        // 移除页面中所有带广告标识的视频元素
        function clearVideoAds() {
            // 这里的选择器要根据目标网站的广告元素特征调整，比如类名、ID包含ad的视频/容器
            let adElements = document.querySelectorAll(
                'video[class*=""ad""], video[id*=""ad""], div[class*=""video-ad""], iframe[src*=""ad""]'
            );
            adElements.forEach(el => el.remove());

            // 覆盖广告相关的全局函数，阻止广告初始化
            if (window.initAdPlayer) window.initAdPlayer = () => {};
            if (window.loadAd) window.loadAd = () => {};
        }

        // 页面加载完成后执行一次
        window.addEventListener('load', clearVideoAds);
        // 监听DOM变化，实时移除动态加载的广告
        const observer = new MutationObserver(mutations => {
            mutations.forEach(mut => {
                if (mut.addedNodes.length > 0) clearVideoAds();
            });
        });
        observer.observe(document.body, { childList: true, subtree: true });
    ";
    await webView.InvokeScriptAsync("eval", new string[] { adBlockScript });
}

两种方案的对比&实用建议 #

• HTTP请求拦截：优点是彻底，从源头切断广告资源，节省流量；缺点是需要维护正则规则，不同网站的广告链接特征不同，需要抓包分析调整规则。
• JS注入拦截：优点是灵活，针对页面元素和脚本直接处理，不需要分析请求URI；缺点是可能漏过一些动态加载的广告，需要根据目标网站调整选择器和函数覆盖逻辑。

另外，如果你的应用可以升级使用WebView2（微软推荐的新一代WebView控件），那它提供了更强大的CoreWebView2.AddWebResourceRequestedFilter API，支持更精细的请求过滤，性能也更好，你可以考虑迁移过去。

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