You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

UWP应用WebView中调用window.open弹窗能否在WebView内打开?

在UWP WebView中拦截window.open并在控件内打开弹窗内容

当然可以实现!UWP的WebView系列控件专门提供了事件来拦截网页发起的window.open请求,让你能把原本要弹出的页面直接加载到WebView内部(或者应用内的自定义窗口里)。下面分两种常用控件类型给你具体方案:

一、使用传统WebView控件(旧版)

传统的WebView控件可以通过监听NewWindowRequested事件来实现拦截:

  1. 绑定事件
    先给你的WebView控件绑定事件——可以在XAML里直接声明:

    <WebView x:Name="MyWebView" NewWindowRequested="MyWebView_NewWindowRequested" />
    

    或者在后台代码里动态绑定:

    MyWebView.NewWindowRequested += MyWebView_NewWindowRequested;
    
  2. 实现事件处理逻辑
    在事件方法里,我们需要取消系统默认的外部浏览器打开行为,然后把目标URL加载到当前WebView(或者新的WebView实例):

    private void MyWebView_NewWindowRequested(WebView sender, WebViewNewWindowRequestedEventArgs args)
    {
        // 标记请求已处理,阻止系统调用外部浏览器
        args.Handled = true;
        
        // 方案1:直接在当前WebView加载弹窗的URL
        if (args.Uri != null)
        {
            sender.Navigate(args.Uri);
        }
    
        // 方案2:如果想在应用内新开一个WebView窗口(比如自定义弹窗)
        // var popupWebView = new WebView();
        // popupWebView.Navigate(args.Uri);
        // 把popupWebView添加到你提前准备的弹窗容器里显示即可
    }
    

二、使用WebView2控件(推荐,现代版)

如果你用的是微软推荐的WebView2控件(基于Edge Chromium内核),处理逻辑类似,但事件是挂载在CoreWebView2实例上:

  1. 初始化并绑定事件
    WebView2需要先完成CoreWebView2的初始化,所以我们要先监听CoreWebView2InitializationCompleted事件:

    private async void MyWebView2_CoreWebView2InitializationCompleted(object sender, CoreWebView2InitializationCompletedEventArgs e)
    {
        if (e.IsSuccess)
        {
            // 绑定NewWindowRequested事件
            MyWebView2.CoreWebView2.NewWindowRequested += CoreWebView2_NewWindowRequested;
        }
    }
    
  2. 处理弹窗请求
    在事件方法里拦截并自定义加载行为:

    private void CoreWebView2_NewWindowRequested(CoreWebView2 sender, CoreWebView2NewWindowRequestedEventArgs args)
    {
        // 阻止默认外部打开
        args.Handled = true;
        
        // 直接在当前WebView加载目标页面
        if (!string.IsNullOrEmpty(args.Uri))
        {
            sender.Navigate(args.Uri);
        }
    
        // 同样,你也可以创建新的WebView2实例来承载弹窗内容
        // var newWebView2 = new WebView2();
        // await newWebView2.EnsureCoreWebView2Async();
        // newWebView2.CoreWebView2.Navigate(args.Uri);
        // 把新控件放到自定义弹窗中显示
    }
    

额外注意事项

  • 如果网页中的window.open调用没有传入合法的URL(比如相对路径或者空值),记得先判断args.Uri(WebView)或args.Uri(WebView2)是否为空,避免空引用错误。
  • 如果你需要保留原页面,同时打开新页面,建议创建新的WebView实例并在应用内的弹窗/新页面中展示,而不是覆盖当前WebView的内容。

内容的提问来源于stack exchange,提问作者Green Train

火山引擎 最新活动