.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#方法。

系列目錄     【已更新最新開發文章，點擊查看詳細】