.NET桌面程序混合開發之三：WebView2與JS的深度應用

C# .net Winform Hybrid`

在 WebView2 控件中使用 JavaScript 根據需求自由擴展原生應用的能力。本文探討如何在 WebView2 中使用 JavaScript，並列舉如何使用高級 WebView2 特性和功能進行開發。

一、開始之前

本文假定你已經有過WebView2開發的經驗。如果你未接觸過WebView2，請先閱讀本系列文章的前兩篇 .NET桌面程序混合開發之一：Winform+H5，WebView2概覽 和 .NET桌面程序混合開發之二：在原生WinFrom程序中使用WebView2

二、WebView2核心功能

以下兩個函數助你將JavaScript植入你的應用中

 

API	描述
ExecuteScriptAsync	在WebView2中執行JavaScript腳本。可以從本系統文章的前兩篇中了解更多信息。
OnDocumentCreatedAsync	當頁面的DOM創建時執行。

1641140151454.table.html 764 B

 

三、場景1：運行指定腳本文件

這個場景中，將從WebView2訪問一段指定的JavaScript腳本。

注意：盡管編寫內聯 JavaScript 對於 JavaScript  運行效率可能比較高效，但您會丟失 JavaScript 顏色主題和行格式，也使得在 Visual Studio 中編寫大段代碼變得困難。

為解決這個問題，先創建單獨的JavaScript文件，再將對文件的引用傳給函數 ExecuteScriptAsync 的參數。

1. 在工程中新建一個.js文件，里面寫好你想要運行的js代碼。這里在工程中新建script.js文件。
2. 將這個js文件轉化為String對象，然后傳給函數 ExecuteScriptAsync
   a. 把腳本文件轉換為字符串對象

   string text = System.IO.File.ReadAllText(@"C:\PATH_TO_YOUR_FILE\script.js");

   b. 將以上代碼復制到你的主窗體初始化函數中
3. 通過ExecuteScriptAsync將腳本傳遞給頁面

   await webView.CoreWebView2.ExecuteScriptAsync(text);

四、場景2：去掉頁面拖拽功能

本部分探討使用腳本去除WebView2控件中的頁面的拖拽功能。
開始前，先看下當前控件所具備的拖拽功能。

1. 任意創建一個.txt文件，比如，創建名為contoso.txt，寫入任意文字。
2. 運行之前系統文章中創建的程序。
3. 把 contoso.txt 文件拖拽到程序的WebView2控件時，會自動打開一個新的窗口顯示文件內容。
   

接下來，添加代碼以移除WebView2控件自帶的拖拽功能：

1. 把以下代碼拷貝到主窗體的初始化函數InitializeAsync()中：

await webView.CoreWebView2.ExecuteScriptAsync("window.addEventListener('dragover',function(e){e.preventDefault();},false);");

await webView.CoreWebView2.ExecuteScriptAsync("window.addEventListener('drop',function(e){" +
"e.preventDefault();" +
"console.log(e.dataTransfer);" +
"console.log(e.dataTransfer.files[0])" +
"}, false);");

2. 運行工程
3. 試着再次將contoso.txt拖入WebView2控件中，會發現已經不打開新窗體了。

五、場景3：禁用右鍵菜單

本部分將移除頁面上默認的右建菜單。開始前，先看下在當前的頁面上點右鍵的彈出菜單：

1. 運行工程
2. 在WebView2控件的任意地方點右鍵。在彈出的菜單中有各種默認的菜單項。
   

接着來添加代碼移除右鍵彈出菜單功能。

1. 將下面的代碼復制粘貼到窗體初始化函數InitializeAsync()中

await webView.CoreWebView2.ExecuteScriptAsync("window.addEventListener('contextmenu', window => {window.preventDefault();});");

2. 再次運行，此時已無法點開右鍵了。