MFC 嵌入網頁界面：CDHtmlDialog 完整使用指南

面對頻繁的客戶端界面升級需求，傳統 MFC 對話框拖控件、改資源、重編譯流程過於繁瑣。CDHtmlDialog 允許直接嵌入 HTML/CSS/JavaScript 作為界面，升級僅需替換網頁文件，大幅降低維護成本。本文詳細演示從專案創建、基本顯示、JavaScript 互調、自動化暴露 C++ 方法到安全提示抑制的完整流程。

專案創建與結構差異

VS2010 新建 MFC Application 專案，勾選「HTML Dialog」：

生成類繼承自 CDHtmlDialog，構造函數多傳入 IDH 對應 HTML 資源 ID。資源文件中新增 IDR_HTML_TESTHTMLDIALOG_DIALOG HTML "TestHtmlDialog.htm" 指定網頁文件。

基本 HTML 顯示測試

修改 TestHtmlDialog.htm：

<HTML>
<HEAD></HEAD>
<BODY ID=CTestHtmlDialogDlg style="font-family:MS Shell Dlg;font-size:8">
<h1>This is a test.</h1>
<h2>I told you this is a test.</h2>
<h3>Didn't hear me? This is a test!</h3>
<img src="C:\test.jpg">
</BODY>
</HTML>

運行效果：標題、圖片正常顯示，開發效率遠超傳統控件佈局。

注意： 圖片路徑目前僅支援絕對路徑，相對路徑無法加載，待後續研究解決。

JavaScript 交互：按鈕點擊彈窗

VS2010 內建 HTML 編輯器支援拖拽控件、雙擊進入事件編寫。添加按鈕並編寫 onclick：

function Button1_onclick() {
    alert("哈囉，點這麼狠幹嘛");
}

JavaScript 調用 C++ 方法：自動化介面暴露

四步實現 JS 呼叫 C++：

1. OnInitDialog 中啟用自動化：EnableAutomation();
2. 暴露自身 IDispatch：SetExternalDispatch(GetIDispatch(TRUE));
3. 頭文件聲明調度映射：DECLARE_DISPATCH_MAP()
4. 實現文件定義映射：

BEGIN_DISPATCH_MAP(CMyDHtmlDialog, CDHtmlDialog)
    DISP_FUNCTION(CMyDHTMLDialog, "SayHello", func, VT_EMPTY, VTS_NONE)
END_DISPATCH_MAP()

C++ 實現 func 彈出訊息框，JS 中調用 external.SayHello()。首次運行會彈出安全提示。

抑制安全提示：重載 CanAccessExternal

在對話框類中重載：

BOOL CWebbrowserDlg::CanAccessExternal() {
    return TRUE;
}

重新運行，安全提示不再出現，JS 與 C++ 互調暢通無阻。

C++ 調用 JavaScript 反向互調

雖資料較少，但同樣可行。原理是獲取網頁 IDispatch 並調用 Invoke。詳見 CodeProject 相關範例。此方式可讓 JS 負責數據驗證，C++ 專注邏輯運算，分工更清晰。

本文出自「正面旺得福反面泰瑞寶」博客，轉載請保留出處：原文鏈接