C# WebView2控件详解

EOFD • 2024-10-04 00:16 • 编程

一、基础介绍

C# WebView2是一个新一代的Webview控件，完全基于Edge浏览器的HTML / CSS / JavaScript渲染引擎。该控件是Microsoft官方对IE(WebBrowser)的替代品，可以获得更优秀的Web体验。

该控件能完美支持WinForm、WPF等常用UI框架，提供了更丰富的API，可以方便地进行一些高级的JavaScript操作。

二、基础使用

使用前需要先安装 NuGet 包，使用NuGet即可快速引入WebView2。同时需要安装Edge浏览器。

Install-Package Microsoft.Web.WebView2 -Version 1.0.774-prerelease

引入WebView2控件：

using Microsoft.Web.WebView2.Core;
using Microsoft.Web.WebView2.WinForms;

// 创建WebView2实例
private async void Form_Load(object sender, EventArgs e)
{
    await webView21.EnsureCoreWebView2Async();
}

三、基础功能

1. 加载URL

在WebView2控件中，我们可以通过以下方式来加载URL：

private async void button1_Click(object sender, EventArgs e)
{
    if (webView21 != null && webView21.CoreWebView2 != null)
    {
        await webView21.CoreWebView2.NavigateAsync("https://www.baidu.com");
    }
}

2. JS与C#交互

在WebView2控件中，我们可以使用 AddScriptToExecuteOnDocumentCreatedAsync 和 AddScriptToExecuteOnDocumentLoadedAsync 方法来执行JavaScript代码。

JavaScript调用C#：

await webView21.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync("window.chrome.webview.postMessage('Hello from JavaScript!');");

C#调用JavaScript：

await webView21.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync("window.prompt('executed');");

四、高级功能

1. WebView2事件

WebView2提供了丰富的事件，供我们监听Webview的各种状态。下面是一个事件示例：

private void Form1_Load(object sender, EventArgs e)
{
    webView21.NavigationCompleted += WebView21_NavigationCompleted;
}

private void WebView21_NavigationCompleted(object sender, CoreWebView2NavigationCompletedEventArgs e)
{
    if (e.IsSuccess)
    {
        Debug.WriteLine("NavigationComplete!");
    }
}

2. WebView2设置

在WebView2中，我们可以通过 CoreWebView2Settings 对象进行各种设置。下面是一些设置的示例：

await webView21.EnsureCoreWebView2Async();
if (webView21.CoreWebView2 != null && webView21.CoreWebView2.Settings != null)
{
    // 禁止弹出窗口
    webView21.CoreWebView2.Settings.AreBrowserAcceleratorKeysEnabled = false;

    // 允许Cookie
    webView21.CoreWebView2.Settings.AreBrowserCookiesEnabled = true;

    // 禁止JS自动打开窗口
  webView21.CoreWebView2.Settings.IsJavaScriptPopupBlocked = true;
}

3. DevTools

WebView2具有完整的DevTools，可以方便地进行调试。下面是一些DevTools的示例：

打开DevTools：

await webView21.CoreWebView2.OpenDevToolsWindowAsync();

关闭DevTools：

await webView21.CoreWebView2.CloseDevToolsWindowAsync();

总结

WebView2控件是一个强大、灵活的webview控件，具有完整的API和事件，方便我们进行前端开发或者Web爬虫等应用场景。通过深入学习WebView2的各种功能，我们可以更好地利用WebView2助力我们的工作。

原创文章，作者：EOFD，如若转载，请注明出处：https://www.506064.com/n/136413.html