C# WinForms 與 WebBrowser 互操作：HTML/JS 呼叫 C# 與 C# 呼叫 JS 完整指南

WebBrowser 控制項 (基於 IE 内核) 提供 ObjectForScripting 機制，讓載入的網頁 JavaScript 能直接呼叫 C# 公開方法，C# 也能透過 InvokeScript 執行 JS 函式。本文完整示範雙向通訊實作。

關鍵設定

1. 類別或 Form 標記 [ComVisible(true)]。
2. 將提供給 JS 呼叫的物件指派給 webBrowser.ObjectForScripting。
3. JS 呼叫 C#：window.external.方法名(參數)。
4. C# 呼叫 JS：webBrowser.Document.InvokeScript("函式名", 參數陣列)。

完整範例程式碼

1. C# 端 (Form1.cs)

using System;
using System.Windows.Forms;
using System.Runtime.InteropServices;

namespace WebBrowserInteropDemo
{
    [ComVisible(true)] // 關鍵：允許 COM 可見
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            // 載入本地測試頁
            string path = Path.Combine(Application.StartupPath, "test.html");
            webBrowser1.Url = new Uri(path);
            
            // 將 Form1 本身 (或獨立類別) 公開給 JS
            webBrowser1.ObjectForScripting = this; 
        }

        // C# 供 JS 呼叫的方法
        public void ShowMessageFromJs(string msg)
        {
            MessageBox.Show($"JS 呼叫 C#：{msg}", "跨語言通訊");
        }

        public void OpenChildForm()
        {
            new Form2().Show();
        }

        // C# 主動呼叫 JS 的按鈕事件
        private void btnCallJs_Click(object sender, EventArgs e)
        {
            object[] args = { "這是來自 C# 的訊息 " + DateTime.Now };
            webBrowser1.Document?.InvokeScript("showAlert", args);
        }
    }

    // 建議：將 COM 介面獨立為專用類別，避免 Form 過度暴露
    [ComVisible(true)]
    public class JsBridge
    {
        private readonly Form1 _owner;
        public JsBridge(Form1 owner) => _owner = owner;

        public void Log(string msg) => _owner.AppendLog(msg);
        public void CloseApp() => _owner.Close();
    }
}

2. HTML/JS 端 (test.html)

    
    
    


    
C# <=> JavaScript 雙向通訊測試
    
    JS → C# (ShowMessageFromJs)
    JS → C# (OpenChildForm)
    

    JS → JS (本地測試)
    

進階：使用獨立 Bridge 類別 (推薦)

// Form1_Load 改為：
var bridge = new JsBridge(this);
webBrowser1.ObjectForScripting = bridge;

// HTML 中呼叫：
// window.external.Log("訊息")
// window.external.CloseApp()

優點：職責分離、易測試、避免 Form 公開過多內部方法、支援多個 WebBrowser 共用橋接器。

常見坑與解決

現代替代方案

• WebView2 (Edge Chromium)：.NET Core/5+ 推薦，使用 CoreWebView2.WebMessageReceived / PostWebMessageAsJson 通訊，效能與相容性大幅提升。
• CefSharp：Chromium 嵌入，功能豐富。

總結

透過 ComVisible + ObjectForScripting + InvokeScript，WinForms 與 WebBrowser 可實現無縫雙向互動。採用獨立 Bridge 類別是企業級應用的最佳實踐。新專案請優先考慮 WebView2。