WebView2簡單試用(二)—— 基本操作


前文中簡單的介紹了下如何使用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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM