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

一、開始之前

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

二、WebView2核心功能

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

三、場景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. 再次執行，此時已無法點開右鍵了。

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

一、開始之前

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

二、WebView2核心功能

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

三、場景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. 再次執行，此時已無法點開右鍵了。