如何在WinForms的WebView2中拦截并取消页面内锚点导航？

要实现所有导航（包括页面内锚点跳转）都在默认浏览器打开、完全阻止WebView2内导航的需求，可通过全局注入JS脚本拦截所有触发导航的行为，配合WebView2的消息机制将目标URL传递给WinForms宿主处理。这种方式能覆盖你提到的所有复杂场景：

1. 注入全局拦截脚本 #

在WebView2初始化完成后（CoreWebView2InitializationCompleted事件中），注入全局脚本确保每次页面加载（含动态内容）都生效：

private void WebView2_CoreWebView2InitializationCompleted(object sender, CoreWebView2InitializationCompletedEventArgs e)
{
    if (e.IsSuccess)
    {
        string interceptScript = @"
        // 处理点击事件（覆盖动态元素、子元素点击场景）
        document.addEventListener('click', function(e) {
            let target = e.target;
            // 向上查找最近的<a>元素
            while (target && target.tagName !== 'A') {
                target = target.parentElement;
            }
            if (target && target.href) {
                e.preventDefault();
                e.stopPropagation();
                window.chrome.webview.postMessage(target.href);
            }
        }, true); // 捕获阶段触发，优先于页面内脚本

        // 处理键盘Enter触发的链接导航
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                const activeElement = document.activeElement;
                if (activeElement.tagName === 'A' && activeElement.href) {
                    e.preventDefault();
                    e.stopPropagation();
                    window.chrome.webview.postMessage(activeElement.href);
                }
            }
        });

        // 拦截JS主动修改历史记录的行为（pushState/replaceState）
        const originalPushState = history.pushState;
        history.pushState = function(state, title, url) {
            let fullUrl;
            if (url.startsWith('#')) {
                fullUrl = window.location.href.split('#')[0] + url;
            } else {
                fullUrl = new URL(url, window.location.origin).href;
            }
            window.chrome.webview.postMessage(fullUrl);
            // 不执行原方法，阻止锚点/路径变化
        };

        const originalReplaceState = history.replaceState;
        history.replaceState = function(state, title, url) {
            let fullUrl;
            if (url.startsWith('#')) {
                fullUrl = window.location.href.split('#')[0] + url;
            } else {
                fullUrl = new URL(url, window.location.origin).href;
            }
            window.chrome.webview.postMessage(fullUrl);
            // 不执行原方法，阻止锚点/路径变化
        };

        // 兜底拦截hashchange事件，防止漏网的锚点变化
        window.addEventListener('hashchange', function(e) {
            e.preventDefault();
            window.chrome.webview.postMessage(window.location.href);
            // 还原hash到之前的状态
            window.location.hash = e.oldURL.split('#')[1] || '';
        });
        ";

        webView2.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(interceptScript);
    }
}

2. 接收JS消息并打开默认浏览器 #

绑定WebMessageReceived事件，处理JS传递的URL，调用系统默认浏览器打开：

private void WebView2_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e)
{
    string targetUrl = e.WebMessageAsJson.Trim('"');
    if (!string.IsNullOrEmpty(targetUrl))
    {
        System.Diagnostics.Process.Start(new System.Diagnostics.ProcessStartInfo(targetUrl) { UseShellExecute = true });
    }
}

3. 保留原有事件处理 #

继续使用NavigationStarting和NewWindowRequested覆盖常规导航场景，确保无遗漏：

private void WebView2_NavigationStarting(object sender, CoreWebView2NavigationStartingEventArgs e)
{
    e.Cancel = true;
    System.Diagnostics.Process.Start(new System.Diagnostics.ProcessStartInfo(e.Uri) { UseShellExecute = true });
}

private void WebView2_NewWindowRequested(object sender, CoreWebView2NewWindowRequestedEventArgs e)
{
    e.Handled = true;
    System.Diagnostics.Process.Start(new System.Diagnostics.ProcessStartInfo(e.Uri) { UseShellExecute = true });
}

关键说明 #

• 捕获阶段的click事件：优先于页面内脚本触发，避免被第三方JS拦截。
• 向上查找<a>元素：解决点击<a>内部子元素（如img）无法触发拦截的问题。
• 拦截历史记录修改：覆盖JS主动修改锚点/路径的场景。
• hashchange兜底：防止极少数漏网的锚点变化，并还原页面状态。

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