前文中簡單的介紹了下如何使用WebView2控件,本文這里介紹下它的常用操作:
頁面跳轉:
頁面跳轉可以通過webview的接口來實現:
webView.Source = new Uri("http://www.baidu.com");
webView.NavigateToString("<h1>hello world</h1>");
這兩個方法本身只是一個封裝,具體的實現在類型為CoreWebView2的webview.CoreView2屬性里面,基本示例如下:
if (webView.CoreWebView2 == null)
{
await webView.EnsureCoreWebView2Async();
}
webView.CoreWebView2.Navigate("https://www.cnblogs.com/tianfang/");
要注意的是前面的EnsureCoreWebView2Async函數,默認情況下,CoreView2是沒有初始化的。
其它操作
其它常用的操作在WebView2控件中已經做了比較好的封裝,這里就不多介紹了。
頁面跳轉事件
WebView2常用的頁面跳轉事件有:
-
NavigationStarting
-
SourceChanged
-
ContentLoading
-
HistoryChanged
-
NavigationCompleted
頁面事件觸發流程如下:
更多事件可以參考API文檔: Navigation Events
調試:
WebView2默認是集成了Devtools的,默認調出的方式也和chrome是一樣的:
-
快捷鍵F12.
-
快捷鍵Ctrl+Shift+I.
-
右鍵菜單中的"檢查"
這給我們調試提供了非常大的方便。
執行腳本:
執行腳本可以使用ExecuteScriptAsync函數, 在WebView和CoreWebView2上都有。
webView.CoreWebView2.ExecuteScriptAsync("3+2*5");
高級的函數還是在CoreWebView2上。例如,可以使用AddScriptToExecuteOnDocumentCreatedAsync注入需要執行的js到每一個頁面。
await webView.EnsureCoreWebView2Async();
await webView.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync("alert('hello world')");
另外,還有一種反向執行腳本:就是在瀏覽器里的前端頁面執行JS腳本,調用宿主程序的函數。這種場景可以使用AddHostObjectToScript函數,如下是一個簡單的示例:
首先定義需要注入的對象,
[ComVisible(true)]
public class Bridge
{
public string Func(string param) => "Example: " + param;
}
然后,調用AddHostObjectToScript函數注入對象,
webView.CoreWebView2.AddHostObjectToScript("bridge", new Bridge());
然后,在前端程序就可以通過chrome.webview.hostObjects獲取注入的對象了。
這個功能本身的內容較多,更詳細的介紹可以參看官方文檔:AddHostObjectToScript