C# WebView2控件詳解

一、基礎介紹

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助力我們的工作。