之前在使用 Cef （可在 Winform 或 WPF 程式中嵌入 Chrome 內核的網頁瀏覽器的組件）時，使用過在 C# 代碼中調用網頁 JS 的功能，以為是 Cef 獨有的，最近工作中得知，原來 Winform 自帶的瀏覽器控制項 WebBrowser 中也有這個功能，那麼我們就來看看吧。 ...
Winform 通過 WebBrowser 與 JS 交互
之前在使用 Cef （可在 Winform 或 WPF 程式中嵌入 Chrome 內核的網頁瀏覽器的組件）時，使用過在 C# 代碼中調用網頁 JS 的功能，以為是 Cef 獨有的，最近工作中得知，原來 Winform 自帶的瀏覽器控制項 WebBrowser 中也有這個功能，那麼我們就來看看吧。
我們先建一個 Winform 窗體 FormBrowserJs：
其中左側是一個 WebBrowser 控制項，右邊有一個 TextBox 接收網頁發來（調用 C# 方法）的消息，另一個 TextBox 提供給我們輸入內容，然後點擊按鈕向網頁發送消息（調用網頁的 JS 方法）。
後臺代碼比較少：
using System; using System.IO; using System.Runtime.InteropServices; using System.Windows.Forms; namespace WinFormPractice { [ComVisible(true)] public partial class FormBrowserJs : Form { public FormBrowserJs() { InitializeComponent(); webBrowser.Navigate(Path.Combine(Application.StartupPath, "HTMLBrowserJs.html")); webBrowser.ObjectForScripting = this; } public void ShowMsgForJs(string msg) { TBRecv.Text += $"{msg}\r\n"; } private void BtnSend_Click(object sender, EventArgs e) { webBrowser.Document.InvokeScript("ShowMsgForCSharp", new []{ TBSend.Text }); } } }
我們用 Navigate 方法讓 WebBrowser 導航到一個本地網頁”HTMLBrowserJs.html” 去，並將其 ObjectForScripting 設置為當前類，意思就是網頁可以調用這個類里的方法，同時還要設置這個類的特性 ——[ComVisible (true)]—— 以便將方法暴露出去。
ShowMsgForJs 方法就是供網頁的 JS 方法調用的，裡面就是把消息顯示在接收框里。
發送按鈕的方法裡面使用了 webBrowser.Document.InvokeScript 方法來調用 JS 的方法，第一個參數是方法名，第二個參數是一個 Object 數組，這裡其實使用的是一個 string 數組。
下麵我們來看看那個網頁：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script>
//alert ("準備就緒");
window.external.ShowMsgForJs("準備就緒");
function ShowMsgForCSharp(str) {
var msg = "收到消息：" + str;
//1、調用 C# 方法；
window.external.ShowMsgForJs(msg);
//2、改變網頁內容；
document.getElementById("info").innerHTML += msg + "<br/>";
//3、彈窗；
alert(msg);
}
</script>
</head>
<body>
<div> 通過 WebBrowser 讓 JS 與 C# 代碼交互 測試頁 </div>
<div id="info"></div>
</body>
</html>
在 script 腳本區，首先通過 window.external.ShowMsgForJs 調用了 Winform 窗體類中的 ShowMsgForJs 方法，提示” 準備就緒”。
然後是供 C# 使用的 ShowMsgForCSharp 方法，裡面使用了三種方法來顯示收到的消息。
最後來看看運行效果吧：
可以看到發送和接收都成功了。
最後奉上 Demo 地址：https://gitee.com/dlgcy/Practice/tree/master/WinFormPractice
同步首發：http://dlgcy.com/winform-webbrowser-js/
