WinUI 3中WebView2无法与iframe内按钮交互的问题求助

问题现象 #

• 在WinUI3环境下使用WebView2加载Google搜索页面，点击「Google Apps」图标弹出的iframe浮层（已通过以下JS代码给iframe添加红边框标记）可正常显示：

  var ifr = document.getElementsByTagName("iframe");
  for (let f of ifr){
      f.style.border = "Red 3px solid";
  }
  

• 浮层内按钮鼠标悬停时会正常变色，但点击按钮（如YouTube）时，浮层会像点击外部区域一样直接消失；账号按钮对应的iframe浮层也存在完全相同的问题。
• 未修改WebView2的任何事件或属性，相同场景在WinForms应用中测试无异常，仅WinUI3下出现该问题。推测浮层显示时指针焦点仍停留在主页面而非iframe内部，但WebView2通过「New Window Request」自动创建的新窗口无此问题。

可行解决方法 #

1. 手动维护WebView2的焦点状态 #

在WebView2的PointerPressed事件中强制将焦点设置到控件本身，确保点击事件能正确传递到内部iframe：

private void WebView2_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    webView2.Focus(FocusState.Programmatic);
    e.Handled = false;
}

将此事件绑定到你的WebView2控件，确保点击操作触发时焦点落在WebView2内，让iframe能正常接收点击事件。

2. 确认WebView2核心设置开启必要权限 #

初始化WebView2时，明确开启DOM交互相关的核心设置，排除权限限制导致的问题：

await webView2.EnsureCoreWebView2Async();
webView2.CoreWebView2Settings.IsScriptEnabled = true;
webView2.CoreWebView2Settings.AreDefaultContextMenusEnabled = true;
webView2.CoreWebView2Settings.IsWebMessageEnabled = true;

虽然这些设置默认通常是开启状态，但显式配置可以避免环境差异导致的权限缺失。

3. 注入JS阻止点击事件冒泡到主页面 #

针对Google搜索浮层的关闭逻辑，注入自定义脚本拦截iframe内的点击事件，阻止事件冒泡到主页面触发浮层关闭：

document.addEventListener('click', function(e) {
    if (e.target.tagName === 'IFRAME' || e.target.closest('iframe')) {
        e.stopPropagation();
    }
}, true);

通过webView2.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync方法将这段脚本注入到页面中，切断主页面监听点击事件关闭浮层的路径。

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