共用方式為

從原生端程式碼呼叫網頁端程式碼

在 WebView2 控制項中使用 JavaScript 可以讓你自訂原生應用程式以符合需求。 本文探討如何在 WebView2 中使用 JavaScript，並回顧如何利用進階 WebView2 的特性與函式進行開發。

開始之前

本文假設你已經有一個可用的專案。 如果你沒有專案，想跟著做，請參考「 開始使用 WebView2」。

基本 WebView2 功能

請使用以下函式開始在您的 WebView2 應用程式中嵌入 JavaScript。

API 描述
ExecuteScriptAsync 在 WebView2 控制項中執行 JavaScript。 在頁面載入文件 物件模型 (DO) M 內容或 導覽完成後呼叫此方法。 請參閱 「開始使用WebView2」。
AddScriptToExecuteOnDocumentCreatedAsync 當 DOM 建立時，它會在每一頁執行。 在 CoreWebView2 初始化後呼叫此方法。

情境：ExecuteScript JSON 編碼結果

因為 的 ExecuteScriptAsync 結果是 JSON 編碼的，如果 JavaScript 的評估結果是字串，你會得到一個 JSON 編碼的字串，而不是字串的值。

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

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

腳本會回傳一個字串，然後 ExecuteScript 用 JSON 編碼給你。 如果你從腳本呼叫 JSON.stringify ，結果會雙重編碼成一個 JSON 字串，而該字串的值就是 JSON 字串。

只有直接存在於結果中的屬性會被包含在 JSON 編碼的物件中;繼承的屬性不會包含在 JSON 編碼的物件中。 大多數 DOM 物件會繼承所有屬性，所以你需要明確複製它們的值到另一個物件才能回傳。 例如：

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

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

執行腳本 ExecuteScriptAsync 時，該腳本會在全域上下文中執行。 把腳本放在匿名函式裡會比較有幫助，這樣你定義的變數就不會污染全域上下文。

例如：

  • 如果你執行這個腳本 const example = 10; 超過一次，之後執行該腳本的次數會拋出例外，因為 example 是你第一次執行時定義的。

  • 如果你改為執行腳本(() => { const example = 10; })();example，變數會在該匿名函式的上下文中被定義。 這樣一來，它就不會污染全球語境，且可以多次運行。

情境：執行專用腳本檔案

在此區塊中，您可以從 WebView2 控制項存取一個專用的 JavaScript 檔案。

注意事項

雖然內嵌撰寫 JavaScript 對於快速執行 JavaScript 指令可能很有效率，但你會失去 JavaScript 的色彩主題和行格式，這會讓在 Visual Studio 中撰寫大量程式碼變得困難。

要解決問題，請用你的程式碼建立一個獨立的 JavaScript 檔案，然後用參數 ExecuteScriptAsync 傳遞一個指向該檔案的參考。

  1. 在你的專案中建立一個 .js 檔案，並加入你想執行的 JavaScript 程式碼。 例如，建立一個名為 script.js. 的檔案。

  2. 在頁面完成導航後，將 JavaScript 檔案轉換成傳入 ExecuteScriptAsync的字串，方法是貼上以下程式碼：

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

  3. 用 ： 傳遞你的文字變數 ExecuteScriptAsync：

    await webView.CoreWebView2.ExecuteScriptAsync(text);

情境：移除拖放功能

在本節中，你使用 JavaScript 移除 WebView2 控制項中的拖放功能。

首先，請探索目前的拖放功能：

  1. 建立 .txt 一個檔案以便拖放。 例如，建立一個名為 contoso.txt 檔案的檔案並加入文字。

  2. 按 F5 以組建及執行專案。

  3. 將檔案拖放 contoso.txt 到 WebView2 控制項中。 會開啟一個新視窗，這是你範例專案程式碼的結果：

    拖放 contoso.txt

  4. 接著，新增程式碼移除 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);");

  5. 按 F5 以組建及執行專案。

  6. 試著拖放 contoso.txt 到 WebView2 控制項。 確認你不能拖放。

情境：移除右鍵選單

在這個區段，你會移除 WebView2 控制項中的右鍵選單。

首先，請先探索右鍵選單目前的功能：

  1. 按 F5 以組建及執行專案。

  2. 在 WebView2 控制鍵的任意位置右鍵點擊。 右鍵選單顯示預設的右鍵選單指令：

    右鍵選單，顯示預設指令

    接著，新增程式碼移除 WebView2 控制項中的右鍵選單功能。

  3. 在 CoreWebView2 物件初始化後，貼上以下程式碼：

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

  4. 按 F5 以組建及執行專案。 確認你無法開啟右鍵選單。

另請參閱

  • Last updated on