Winform 使用WebView2 开发现代应用

当前位置：点晴教程→知识管理交流 →『技术文档交流』

admin

2025年1月18日 14:54 本文热度 155

WebView2 是 Microsoft 提供的一种嵌入式浏览器控件，基于 Edge (Chromium) 引擎。

它允许开发者将现代 Web 技术（如 HTML、CSS 和 JavaScript）与桌面应用相结合，从而构建强大、灵活的用户界面。

本文将介绍 WebView2 的基本使用，并重点讲解以下几个重要功能：

NewWindowRequested
WebResourceResponseReceived
AddWebResourceRequestedFilter
WebResourceRequested

环境准备

安装 WebView2 Runtime： WebView2 需要运行时支持，用户设备必须安装 WebView2 Runtime。如果未安装，可以通过以下链接下载：https://go.microsoft.com/fwlink/p/?LinkId=2124703。
引入必要的 NuGet 包：在 Visual Studio 中，添加 Microsoft.Web.WebView2 NuGet 包。
初始化 WebView2：创建 WebView2 控件并确保其已正确初始化。以下代码检查并安装 WebView2 Runtime：

private static async Task<bool> InitializeWebView2(){    try    {        string version = CoreWebView2Environment.GetAvailableBrowserVersionString();        return !string.IsNullOrEmpty(version);    }    catch    {        // 引导用户安装 WebView2 Runtime        MessageBox.Show("WebView2 Runtime 未安装。请安装后重试。", "错误", MessageBoxButtons.OK, MessageBoxIcon.Error);        return false;    }}

创建 WebView2 控件

以下代码展示了如何创建 WebView2 控件并初始化其核心功能：

public static async Task<WebView2> CreateWebView(){    if (!await InitializeWebView2())    {        return null;    }    WebView2 webView2 = new WebView2    {        Dock = DockStyle.Fill    };    await webView2.EnsureCoreWebView2Async(null);    // 注册事件    webView2.CoreWebView2.NewWindowRequested += CoreWebView2_NewWindowRequested;    webView2.CoreWebView2.WebResourceResponseReceived += CoreWebView2_WebResourceResponseReceived;    // 添加请求过滤器    webView2.CoreWebView2.AddWebResourceRequestedFilter("*://www.example.com/*", CoreWebView2WebResourceContext.Document);    webView2.CoreWebView2.WebResourceRequested += WebView2_WebResourceRequested;    return webView2;}

拦截新窗口请求：`NewWindowRequested`

默认情况下，WebView2 会尝试在新窗口中打开弹出链接。通过 NewWindowRequested 事件，我们可以拦截弹窗行为并将新内容加载到当前窗口。

示例代码：

private static void CoreWebView2_NewWindowRequested(object sender, CoreWebView2NewWindowRequestedEventArgs e){    if (sender is CoreWebView2 webView)    {        e.Handled = true; // 阻止默认弹窗行为        webView.Navigate(e.Uri); // 在当前 WebView2 中加载新页面    }}

拦截和处理网络响应：`WebResourceResponseReceived`

通过 WebResourceResponseReceived，我们可以查看并分析所有网络响应。例如，可以记录某些请求的响应时间或检查响应头信息。

示例代码：

private static void CoreWebView2_WebResourceResponseReceived(object sender, CoreWebView2WebResourceResponseReceivedEventArgs e){    var uri = e.Request.Uri;    Console.WriteLine($"Response received for: {uri}");    e.Response.Headers.ToList().ForEach(header =>    {        Console.WriteLine($"Header: {header.Key} - {header.Value}");    });}

添加请求过滤器：`AddWebResourceRequestedFilter`

为了提高性能并精确控制，WebView2 提供了 AddWebResourceRequestedFilter 方法，用于定义需要监听的请求类型和范围。

使用方法：

webView.CoreWebView2.AddWebResourceRequestedFilter(    "*://www.example.com/*", // 目标 URL 模式    CoreWebView2WebResourceContext.Document // 资源类型：仅文档);

拦截网络请求：`WebResourceRequested`

通过 WebResourceRequested 事件，可以拦截网络请求并进行处理，例如修改请求头或阻止特定请求。

示例代码：

private static async void WebView2_WebResourceRequested(object sender, CoreWebView2WebResourceRequestedEventArgs e){    var request = e.Request;    // 检查是否有特定 Cookie    if (sender is CoreWebView2 webView)    {        var cookies = (await webView.CookieManager.GetCookiesAsync(request.Uri))                        .Where(c => c.Name == "SpecificCookie").ToList();        if (cookies.Any())        {            // 删除特定 Cookie            cookies.ForEach(c => webView.CookieManager.DeleteCookie(c));        }    }    Console.WriteLine($"Request intercepted: {request.Uri}");}