.NET混合開發解決方案11 WebView2載入的網頁中JS呼叫C#方法

系列目錄     【已更新最新開發文章，點選檢視詳細】

WebView2控制元件應用詳解系列部落格

.NET桌面程式整合Web網頁開發的十種解決方案 

.NET混合開發解決方案1 WebView2簡介

.NET混合開發解決方案2 WebView2與Edge瀏覽器的區別

.NET混合開發解決方案3 WebView2的程式模型

.NET混合開發解決方案4 WebView2的執行緒模型

.NET混合開發解決方案5 WebView2執行時與分發應用

.NET混合開發解決方案6 檢測是否已安裝合適的WebView2執行時 

.NET混合開發解決方案7 WinForm程式中通過NuGet管理器引用整合WebView2控制元件

.NET混合開發解決方案8 WinForm程式中通過設定固定版本執行時的BrowserExecutableFolder屬性整合WebView2控制元件

.NET混合開發解決方案9 WebView2控制元件的導航事件

.NET混合開發解決方案10 WebView2控制元件呼叫網頁JS方法

　　在我的部落格《.NET混合開發解決方案10 WebView2控制元件呼叫網頁JS方法》中介紹了C#呼叫網頁中定義的JavaScript方法以執行某種業務邏輯，同樣WebView2控制元件中載入的網頁中自定義的JavaScript方法中也可以呼叫C#方法。

　　WebView2控制元件通過將物件傳遞到Web網頁，使應用程式能夠彌合web和本機應用程式（客戶端程式：WinForm、WPF、WinUI、Win32）之間的鴻溝。此類物件在本機程式碼中定義，通常稱為主機物件。可以使用WebView2的AddHostObjectToScript()將它們投影到JavaScript中。

　　在開發WebView2應用程式時，需要一個本機物件，它的方法或屬性很有用。開發者希望從web端程式碼觸發這些本機物件方法，或者作為應用程式web端使用者互動的結果。最主要的是開發者不想也不需要在web端程式碼中重新實現本機物件的方法。AddHostObjectToScript API支援web端程式碼重用本機端程式碼。

　　比如在網頁中呼叫客戶端電腦的攝像頭，如果在Web端開發，則編寫大量的程式碼。如果在本機實現，則非常簡單。能夠呼叫本機物件的方法比在應用程式的web端重新編碼物件的方法更快、效率更高。在這種情況下，本機端程式碼可以將物件傳遞到應用程式的web端JavaScript程式碼，以便JavaScript程式碼可以重用本機API的方法。如以下應用場景：

• 有一個鍵盤API，你想呼叫keyboardObject。從web端顯示鍵盤功能。
• JavaScript是沙盒，限制了它在本機端的能力。例如，如果需要在本機端訪問檔案，則必須使用本機檔案系統。如果您有一個通過AddHostObjectToScript向JavaScript公開的本機物件，則可以使用它來操作本機檔案系統上的檔案。

下面通過一個Demo來講解如何實現JS呼叫C#方法。

業務場景：JS呼叫C#方法，傳遞三個引數，分別是num1、num2、message。C#接收到引數後將num1與num2進行加法運算，並將計算結果返回給JS方法。

先看一下示例效果

下面詳細介紹其實現步驟。

步驟1

定義一個主機物件，如：CustomWebView2HostObject類，在類中編寫方法並實現內部業務邏輯。

using System.Runtime.InteropServices;

namespace WebView2Demo_WinForm
{
    /// <summary>
    /// 自定義宿主類，用於向網頁註冊C#物件，供JS呼叫
    /// </summary>
    [ClassInterface(ClassInterfaceType.AutoDual)]
    [ComVisible(true)]
    public class CustomWebView2HostObject
    {
        public string TestCalcAddByCsharpMethod(int num1, int num2, string message)
        {
            MessageBox.Show($"C#方法接收到J傳入的引數 num1={num1}，num2={num2}，message={message}", "提示", MessageBoxButtons.OK, MessageBoxIcon.Information);

            return "計算結果為:" + (num1 + num2);
        }
    }
}

自定義的 CustomWebView2HostObject 類，必須標記 [ClassInterface(ClassInterfaceType.AutoDual)]、[ComVisible(true)] 特性，否則JS無法訪問到該類

C#方法與平時寫的程式碼完全一樣。

步驟2

在訪問目標網頁之前，通過webView2.CoreWebView2.AddHostObjectToScript()方法向網頁中注入主機物件，其中第一個引數是自定義名稱（隨意命名），JS中訪問主機物件時就需要與該引數名稱一致。

步驟3

網頁中定義一個測試按鈕，並設定點選事件

點選事件中，第31行獲取主機物件，customWebView2HostObject 與 C#中定義的名稱需要完全相同。

使用主機物件呼叫C#方法，由於呼叫過程是非同步的，所以需要使用 await，方法定義前需要加上 async。

以上三步完成後即實現了JS訪問C#方法。

系列目錄     【已更新最新開發文章，點選檢視詳細】