從原生端程式碼呼叫 Web 端程式碼

發行項
04/04/2023

在 WebView2 控制項中使用 JavaScript 可讓您自訂原生應用程式，以符合您的需求。本文探討如何在 WebView2 中使用 JavaScript，並檢閱如何使用進階 WebView2 功能和函式進行開發。

開始之前

本文假設您已經有工作專案。如果您沒有專案，而且想要跟著做，請參閱開始使用 WebView2。

基本 WebView2 函式

使用下列函式開始在 WebView2 應用程式中內嵌 JavaScript。

API	描述
ExecuteScriptAsync	在 WebView2 控制項中執行 JavaScript。在載入內容或流覽完成 (DOM 頁面之後，呼叫此方法) 。請參閱開始使用 WebView2。
AddScriptToExecuteOnDocumentCreatedAsync	建立 DOM 時，會在每個頁面上執行。在 CoreWebView2 初始化之後呼叫這個方法。

案例：ExecuteScript JSON 編碼的結果

因為的結果 ExecuteScriptAsync 是 JSON 編碼，所以如果評估 JavaScript 的結果是字串，您將會收到 JSON 編碼的字串，而不是字串的值。

例如，下列程式碼會執行產生字串的腳本。產生的字串包含開頭的引號、結尾的引號，以及逸出的斜線：

string result = await coreWebView2.ExecuteScriptAsync(@"'example'");
Debug.Assert(result == "\"example\"");

腳本會傳回 JSON 為您編碼的字串 ExecuteScript 。如果您從腳本呼叫 JSON.stringify ，則結果會加倍編碼為 JSON 字串，其值為 JSON 字串。

只有直接在結果中的屬性會包含在 JSON 編碼物件中;繼承的屬性不包含在 JSON 編碼的物件中。大部分的 DOM 物件都會繼承所有屬性，因此您必須明確地將其值複製到另一個物件以傳回。例如：

指令碼	結果
`performance.memory`	`{}`
`(() => { const {totalJSHeapSize, usedJSHeapSize} = performance.memory; return {totalJSHeapSize, usedJSHeapSize}; })();`	`{"totalJSHeapSize":4434368,"usedJSHeapSize":2832912}`

當我們傳回時， performance.memory 因為所有屬性都是繼承的，所以在結果中看不到它的任何屬性。如果改為將特定屬性值從 performance.memory 複製到我們自己的新物件以傳回，則我們會在結果中看到這些屬性。

透過該腳本執行腳本 ExecuteScriptAsync 時，會在全域內容中執行。將您的腳本放在匿名函式中會很有説明，讓您定義的任何變數不會受到全域內容的監視。

例如：

如果您多次執行腳本 const example = 10; ，後續執行腳本時會擲回例外狀況，因為 example 是在您第一次執行腳本時所定義。
如果您改為執行腳本 (() => { const example = 10; })(); ，則 example 變數會定義在該匿名函式的內容中。如此一來，它就不會散佈全域內容，而且可以執行一次以上。

案例：執行專用腳本檔案

在本節中，您會從 WebView2 控制項存取專用的 JavaScript 檔案。

注意事項

雖然撰寫 JavaScript 內嵌對於快速 JavaScript 命令很有效率，但您會遺失 JavaScript 色彩主題和線條格式設定，因此很難在 Visual Studio 中撰寫大量的程式碼區段。

若要解決此問題，請使用您的程式碼建立個別的 JavaScript 檔案，然後使用參數傳遞該檔案的 ExecuteScriptAsync 參考。

在專案中建立 .js 檔案，並新增您想要執行的 JavaScript 程式碼。例如，建立名為的 script.js 檔案。
將 JavaScript 檔案轉換成傳遞至 ExecuteScriptAsync 的字串，方法是在頁面完成巡覽之後貼上下列程式碼：
```
string text = System.IO.File.ReadAllText(@"C:\PATH_TO_YOUR_FILE\script.js");
```

使用 ExecuteScriptAsync 傳遞您的文字變數：

await webView.CoreWebView2.ExecuteScriptAsync(text);

案例：移除拖放功能

在本節中，您會使用 JavaScript 從 WebView2 控制項移除拖放功能。

若要開始，請探索目前的拖放功能：

.txt建立檔案以拖放。例如，建立名為的 contoso.txt 檔案，並在其中新增文字。
按 F5 以組建及執行專案。
將檔案拖放 contoso.txt 到 WebView2 控制項。新的視窗隨即開啟，這是範例專案中程式碼的結果：

接下來，新增程式碼以從 WebView2 控制項移除拖放功能。在您的程式碼中初始化 CoreWebView2 物件之後，貼上下列程式碼：

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

按 F5 以組建及執行專案。
嘗試拖放 contoso.txt 到 WebView2 控制項。確認您無法拖放。

在本節中，您會從 WebView2 控制項中移除滑鼠右鍵功能表。

若要開始，請探索右鍵功能表的目前功能：

按 F5 以組建及執行專案。
以滑鼠右鍵按一下 WebView2 控制項上的任何位置。操作功能表會顯示預設的右鍵功能表命令：

接下來，新增程式碼以從 WebView2 控制項移除右鍵功能表功能。

在您的程式碼中初始化 CoreWebView2 物件之後，貼上下列程式碼：

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

按 F5 以組建及執行專案。確認您無法開啟滑鼠右鍵功能表。

另請參閱

開始使用 WebView2
WebView2Samples 存放庫 - WebView2 功能的完整範例。
WebView2 API 參考
WebView2 功能和 API 概觀中的 Web/原生 Interop。

共用方式為