實(shí)戰(zhàn)：MFC與WebBrowser控件深度解析)
1. 項(xiàng)目概述為什么用VC寫一個(gè)自己的多頁瀏覽器如果你是一名Windows平臺(tái)的C開發(fā)者尤其是經(jīng)歷過MFC、ATL時(shí)代的“老炮兒”看到“VC實(shí)現(xiàn)的多網(wǎng)頁瀏覽器”這個(gè)標(biāo)題可能會(huì)會(huì)心一笑。這不僅僅是一個(gè)課程設(shè)計(jì)或畢業(yè)項(xiàng)目它更像是一個(gè)時(shí)代的縮影和一次技術(shù)的深度回溯。在如今Electron、CEFChromium Embedded Framework大行其道的年代從頭用VC這里通常指Visual C特別是其經(jīng)典的MFC框架打造一個(gè)瀏覽器聽起來有些“復(fù)古”但其背后的技術(shù)價(jià)值和學(xué)習(xí)意義遠(yuǎn)超一個(gè)簡單的應(yīng)用本身。這個(gè)項(xiàng)目的核心是深入Windows桌面應(yīng)用開發(fā)的核心腹地。它不依賴于任何現(xiàn)成的瀏覽器內(nèi)核封裝意味著你需要直面WebBrowser控件或更底層的COM接口、處理多文檔界面MDI/Tab、管理異步導(dǎo)航事件、處理腳本交互等一系列底層問題。通過它你能徹底理解一個(gè)瀏覽器外殼Browser Shell是如何工作的明白進(jìn)程內(nèi)In-Process與進(jìn)程外Out-of-ProcessActiveX控件的差異并深刻體會(huì)到Windows消息循環(huán)、COM線程模型與Web異步世界交織時(shí)的復(fù)雜性。最近社區(qū)里關(guān)于VC運(yùn)行時(shí)庫安裝、調(diào)試文件生成、快捷鍵實(shí)現(xiàn)的討論熱度不減這恰恰說明了仍有大量遺留或特定領(lǐng)域的桌面應(yīng)用依賴于這套技術(shù)棧。實(shí)現(xiàn)一個(gè)多頁瀏覽器正是串聯(lián)起這些知識(shí)點(diǎn)的最佳實(shí)踐你需要處理運(yùn)行時(shí)庫的依賴確保程序分發(fā)到用戶電腦上能正常運(yùn)行你需要生成詳細(xì)的調(diào)試信息以應(yīng)對瀏覽器控件那令人頭疼的崩潰問題你還需要設(shè)計(jì)一套高效的快捷鍵系統(tǒng)來管理多個(gè)標(biāo)簽頁的切換、刷新與關(guān)閉。所以這不僅僅是一個(gè)瀏覽器它是一個(gè)Windows桌面開發(fā)技術(shù)的綜合演練場。接下來我將帶你從零開始拆解其中的每一個(gè)關(guān)鍵技術(shù)環(huán)節(jié)分享那些官方文檔不會(huì)寫的實(shí)操細(xì)節(jié)和踩坑經(jīng)驗(yàn)。2. 核心架構(gòu)設(shè)計(jì)從單窗口到多頁簽的演進(jìn)之路2.1 技術(shù)選型為什么是MFC與WebBrowser控件在VC生態(tài)中實(shí)現(xiàn)瀏覽器功能首選的快速方案是使用MFCMicrosoft Foundation Classes和其封裝的CHtmlView類或者更底層地使用ActiveX控件Microsoft Web Browser。CHtmlView本質(zhì)上就是一個(gè)封裝了WebBrowser ActiveX控件的視圖類它提供了諸如Navigate、GoBack、Refresh等高層接口極大簡化了開發(fā)。為什么這么選原生與高效WebBrowser控件實(shí)際上是IEInternet Explorer的渲染引擎Trident的ActiveX封裝。它深度集成于Windows系統(tǒng)無需額外分發(fā)巨大的瀏覽器內(nèi)核程序體積小巧。COM技術(shù)典范瀏覽器控件是一個(gè)典型的COM組件通過VC進(jìn)行開發(fā)是學(xué)習(xí)并實(shí)踐COM客戶端編程的絕佳案例。你需要處理接口指針如IWebBrowser2、處理連接點(diǎn)Connection Points以接收事件如BeforeNavigate2、DocumentComplete。與MFC天然契合MFC對ActiveX控件有良好的支持通過ClassWizard可以輕松為控件添加事件處理映射和消息映射將COM事件轉(zhuǎn)換為熟悉的MFC消息處理函數(shù)。注意WebBrowser控件依賴的IE內(nèi)核已停止更新對現(xiàn)代Web標(biāo)準(zhǔn)如CSS3、ES6支持有限。此方案適用于開發(fā)內(nèi)網(wǎng)應(yīng)用、需要與本地COM組件深度交互的專用瀏覽器或作為學(xué)習(xí)項(xiàng)目。若追求現(xiàn)代Web兼容性應(yīng)考慮CEF或WebView2。2.2 界面架構(gòu)SDITab Control vs. MDI多頁瀏覽器的核心是同時(shí)管理多個(gè)網(wǎng)頁實(shí)例。在MFC中主要有兩種界面架構(gòu)思路方案一SDI Tab Control推薦這是目前主流瀏覽器的實(shí)現(xiàn)方式。創(chuàng)建一個(gè)單文檔界面SDI在主框架窗口CMainFrame上放置一個(gè)標(biāo)簽控件CTabCtrl。每個(gè)標(biāo)簽頁對應(yīng)一個(gè)獨(dú)立的瀏覽器視圖CHtmlView或其派生類窗口。優(yōu)點(diǎn)界面現(xiàn)代用戶體驗(yàn)好標(biāo)簽管理邏輯清晰內(nèi)存和資源管理相對直接每個(gè)標(biāo)簽頁是一個(gè)獨(dú)立的View窗口。實(shí)現(xiàn)關(guān)鍵需要?jiǎng)討B(tài)創(chuàng)建、顯示、隱藏和銷毀承載CHtmlView的子窗口并同步更新標(biāo)簽控件的顯示。方案二多文檔界面MDI利用MFC內(nèi)置的MDI框架每個(gè)網(wǎng)頁在一個(gè)獨(dú)立的子窗口CMDIChildWnd中打開每個(gè)子窗口內(nèi)包含一個(gè)CHtmlView。優(yōu)點(diǎn)MFC原生支持窗口管理層疊、平鋪由框架完成實(shí)現(xiàn)快速。缺點(diǎn)每個(gè)網(wǎng)頁都是一個(gè)完整的帶邊框、標(biāo)題欄的窗口不符合現(xiàn)代瀏覽器的使用習(xí)慣資源開銷相對較大。我們的選擇采用SDI Tab Control方案。它更貼近真實(shí)產(chǎn)品也讓我們能更深入地控制窗口和消息的生命周期。2.3 程序生命周期與運(yùn)行時(shí)庫考量在你開始編碼之前必須處理好VC運(yùn)行時(shí)庫Runtime Library的依賴問題。這是無數(shù)新手部署程序時(shí)遇到的第一個(gè)“攔路虎”。你的程序在編譯時(shí)需要鏈接C/C運(yùn)行時(shí)庫。編譯選項(xiàng)通常在“項(xiàng)目屬性 - C/C - 代碼生成 - 運(yùn)行時(shí)庫”中設(shè)置/MD或/MDd動(dòng)態(tài)鏈接到運(yùn)行時(shí)庫的多線程DLL版本。你的程序會(huì)依賴msvcrt.dll等系統(tǒng)DLL。發(fā)布時(shí)目標(biāo)機(jī)器上必須存在對應(yīng)版本的VC Redistributable Package。/MT或/MTd靜態(tài)鏈接運(yùn)行時(shí)庫。運(yùn)行時(shí)庫代碼會(huì)被打包進(jìn)你的EXE程序體積變大但部署簡單無需額外安裝運(yùn)行庫。實(shí)操心得 對于像瀏覽器這樣的項(xiàng)目我強(qiáng)烈建議在開發(fā)調(diào)試階段使用**/MDd**Debug動(dòng)態(tài)鏈接以方便調(diào)試。在發(fā)布Release版本時(shí)權(quán)衡部署便利性和程序體積如果目標(biāo)環(huán)境確定如企業(yè)內(nèi)網(wǎng)且已統(tǒng)一安裝對應(yīng)版本的VC運(yùn)行庫可使用**/MD**。如果希望用戶“開箱即用”避免“缺少vcruntime140.dll”的錯(cuò)誤可以選擇**/MT**進(jìn)行靜態(tài)鏈接。但要注意靜態(tài)鏈接可能會(huì)帶來一些許可合規(guī)性上的考量需閱讀VC運(yùn)行時(shí)庫的許可協(xié)議。從網(wǎng)絡(luò)熱詞可以看到微軟官網(wǎng)提供了從VC 2005到最新v14VS2017-2026的全套可再發(fā)行組件包。如果你選擇動(dòng)態(tài)鏈接/MD在制作安裝包時(shí)務(wù)必包含或引導(dǎo)用戶安裝對應(yīng)版本的VC_redist.x64.exe或VC_redist.x86.exe。3. 核心模塊實(shí)現(xiàn)詳解3.1 主框架與標(biāo)簽頁管理首先我們使用AppWizard創(chuàng)建一個(gè)基于對話框Dialog-based或單文檔SDI的MFC項(xiàng)目。為了更好的控制我傾向于從CFrameWnd派生主窗口。1. 主框架窗口CMainFrame設(shè)計(jì)在主框架中我們創(chuàng)建以下核心成員class CMainFrame : public CFrameWnd { // ... private: CTabCtrl m_wndTab; // 標(biāo)簽控件 CImageList m_tabIcons; // 標(biāo)簽圖標(biāo)列表 CMapUINT_PTR, UINT_PTR, CHtmlViewEx*, CHtmlViewEx* m_mapTabIdToView; // 標(biāo)簽ID到視圖的映射 CHtmlViewEx* m_pActiveView; // 當(dāng)前活動(dòng)視圖 int m_nNextTabId; // 下一個(gè)標(biāo)簽ID };CHtmlViewEx是我們從CHtmlView派生的自定義類用于增強(qiáng)功能。2. 標(biāo)簽頁的動(dòng)態(tài)創(chuàng)建與關(guān)聯(lián)當(dāng)用戶點(diǎn)擊“新建標(biāo)簽頁”按鈕或菜單時(shí)執(zhí)行以下操作void CMainFrame::OnNewTab() { // 1. 為新的瀏覽器視圖創(chuàng)建容器窗口通常是一個(gè)Pane或靜態(tài)控件區(qū)域 CRect rect; m_wndClientArea.GetClientRect(rect); // 假設(shè)m_wndClientArea是標(biāo)簽頁下方的內(nèi)容區(qū) CHtmlViewEx* pNewView new CHtmlViewEx; // 2. 創(chuàng)建視圖窗口注意樣式要包含WS_CHILD并使其不可見初始 if (!pNewView-Create(NULL, NULL, WS_CHILD | WS_VISIBLE, rect, this, IDC_BROWSER_VIEW_BASE m_nNextTabId)) { delete pNewView; return; } // 3. 導(dǎo)航到初始頁面如空白頁或主頁 pNewView-Navigate2(_T(about:blank), 0, NULL); // 4. 向標(biāo)簽控件添加新標(biāo)簽 TCITEM tci {0}; tci.mask TCIF_TEXT | TCIF_IMAGE; CString strTitle _T(新標(biāo)簽頁); tci.pszText strTitle.GetBuffer(); tci.iImage 0; // 使用圖標(biāo)列表中的第一個(gè)圖標(biāo)如地球圖標(biāo) int nTabIndex m_wndTab.InsertItem(m_wndTab.GetItemCount(), tci); strTitle.ReleaseBuffer(); // 5. 建立映射關(guān)系并激活此標(biāo)簽 UINT_PTR nTabId (UINT_PTR)pNewView-GetSafeHwnd(); // 或用自增ID m_mapTabIdToView.SetAt(nTabId, pNewView); m_wndTab.SetItemData(nTabIndex, nTabId); // 6. 隱藏所有視圖只顯示當(dāng)前活動(dòng)的 ShowViewForTab(nTabIndex); m_nNextTabId; }關(guān)鍵點(diǎn)CHtmlView::Create的最后一個(gè)參數(shù)是子窗口ID這里我們使用一個(gè)基準(zhǔn)ID動(dòng)態(tài)生成便于消息路由。視圖窗口的父窗口必須是主框架或一個(gè)特定的客戶區(qū)容器不能是標(biāo)簽控件本身。3. 標(biāo)簽切換與視圖顯示響應(yīng)標(biāo)簽控件的TCN_SELCHANGE通知消息void CMainFrame::OnTabSelChange(NMHDR* pNMHDR, LRESULT* pResult) { int nSel m_wndTab.GetCurSel(); if (nSel ! -1) { ShowViewForTab(nSel); } *pResult 0; } void CMainFrame::ShowViewForTab(int nTabIndex) { UINT_PTR nTabId m_wndTab.GetItemData(nTabIndex); CHtmlViewEx* pView NULL; if (m_mapTabIdToView.Lookup(nTabId, pView) pView) { // 隱藏所有視圖 POSITION pos m_mapTabIdToView.GetStartPosition(); UINT_PTR key; CHtmlViewEx* pTempView; while (pos ! NULL) { m_mapTabIdToView.GetNextAssoc(pos, key, pTempView); if (pTempView pTempView-GetSafeHwnd()) { pTempView-ShowWindow(SW_HIDE); } } // 顯示并激活選中的視圖 pView-ShowWindow(SW_SHOW); pView-SetFocus(); m_pActiveView pView; // 更新地址欄、標(biāo)題欄等UI根據(jù)pView的當(dāng)前URL和標(biāo)題 UpdateAddressBar(pView-GetLocationURL()); UpdateWindowTitle(pView-GetLocationName()); } }3.2 增強(qiáng)型瀏覽器視圖類CHtmlViewEx直接使用CHtmlView功能有限我們需要派生一個(gè)類來增強(qiáng)它特別是處理事件和擴(kuò)展接口。1. 獲取并處理WebBrowser事件CHtmlView通過OnBeforeNavigate2等虛函數(shù)提供事件通知但有時(shí)我們需要更精細(xì)的控制或訪問底層接口。class CHtmlViewEx : public CHtmlView { protected: DECLARE_DYNCREATE(CHtmlViewEx) DECLARE_EVENTSINK_MAP() // 聲明事件接收映射 // 覆蓋基類虛函數(shù)以處理導(dǎo)航事件 virtual void OnBeforeNavigate2(LPCTSTR lpszURL, DWORD nFlags, LPCTSTR lpszTargetFrameName, CByteArray baPostedData, LPCTSTR lpszHeaders, BOOL* pbCancel); virtual void OnDocumentComplete(LPCTSTR lpszURL); virtual void OnTitleChange(LPCTSTR lpszText); virtual void OnNavigateComplete2(LPCTSTR strURL); // 添加事件接收器以處理更多事件如NewWindow3阻止彈出窗口 BEGIN_EVENTSINK_MAP(CHtmlViewEx, CHtmlView) ON_EVENT(CHtmlViewEx, AFX_IDW_PANE_FIRST, 259 /* DISPID_NEWWINDOW3 */, OnNewWindow3, VTS_DISPATCH VTS_PBOOL VTS_DWORD VTS_BSTR VTS_BSTR) END_EVENTSINK_MAP() void OnNewWindow3(LPDISPATCH* ppDisp, BOOL* Cancel, DWORD dwFlags, LPCTSTR bstrUrlContext, LPCTSTR bstrUrl); // 獲取底層IWebBrowser2接口 IWebBrowser2* GetIWebBrowser2() const { return m_pBrowserApp; } private: CString m_strCurrentTitle; };在OnDocumentComplete或OnTitleChange中我們可以通知主框架更新對應(yīng)標(biāo)簽的標(biāo)題void CHtmlViewEx::OnTitleChange(LPCTSTR lpszText) { CHtmlView::OnTitleChange(lpszText); m_strCurrentTitle lpszText; // 獲取主框架并發(fā)送自定義消息通知標(biāo)題改變 CMainFrame* pMain (CMainFrame*)AfxGetMainWnd(); if (pMain) { pMain-PostMessage(WM_USER_UPDATE_TAB_TITLE, (WPARAM)GetSafeHwnd(), (LPARAM)(LPCTSTR)m_strCurrentTitle); } }2. 實(shí)現(xiàn)快捷鍵支持網(wǎng)絡(luò)熱詞中提到了“vc 編程中如何實(shí)現(xiàn)快捷鍵”這在瀏覽器中至關(guān)重要。快捷鍵處理通常在主框架級別進(jìn)行。首先在資源文件中定義快捷鍵表Accelerator Table添加如CtrlT新建標(biāo)簽、CtrlW關(guān)閉標(biāo)簽、CtrlTab下一個(gè)標(biāo)簽、CtrlShiftTab上一個(gè)標(biāo)簽、F5刷新、CtrlF5強(qiáng)制刷新等條目。然后在主框架的PreTranslateMessage函數(shù)中翻譯快捷鍵BOOL CMainFrame::PreTranslateMessage(MSG* pMsg) { // 先讓快捷鍵表處理 if (m_hAccelTable ::TranslateAccelerator(m_hWnd, m_hAccelTable, pMsg)) return TRUE; // 如果當(dāng)前活動(dòng)視圖有輸入焦點(diǎn)可以優(yōu)先讓視圖處理例如Web頁面內(nèi)的CtrlF查找 if (m_pActiveView m_pActiveView-GetSafeHwnd()) { // 可以檢查消息是否是鍵盤消息并判斷目標(biāo)窗口是否為瀏覽器視圖或其子控件 if (pMsg-message WM_KEYFIRST pMsg-message WM_KEYLAST) { HWND hWndFocus ::GetFocus(); if (m_pActiveView-IsChild(CWnd::FromHandle(hWndFocus))) { // 瀏覽器控件自身可能處理了一些快捷鍵如CtrlP打印這里可以選擇不攔截 // 或者我們可以攔截特定的、需要框架處理的快捷鍵 if (pMsg-message WM_KEYDOWN) { BOOL bCtrl (::GetKeyState(VK_CONTROL) 0x8000); switch (pMsg-wParam) { case T: if (bCtrl) { OnNewTab(); return TRUE; } break; case W: if (bCtrl) { OnCloseCurrentTab(); return TRUE; } break; case VK_TAB: if (bCtrl) { CycleTabs(bCtrl 0x8000, ::GetKeyState(VK_SHIFT) 0x8000); return TRUE; } break; } } } } } return CFrameWnd::PreTranslateMessage(pMsg); }實(shí)操心得處理瀏覽器快捷鍵時(shí)要注意消息傳遞的優(yōu)先級。WebBrowser控件自身會(huì)處理很多快捷鍵如CtrlF、CtrlP。我們的框架快捷鍵如CtrlT/W應(yīng)該在PreTranslateMessage中盡早處理而頁面內(nèi)的快捷鍵則交給瀏覽器控件。TranslateAccelerator是處理標(biāo)準(zhǔn)菜單快捷鍵的利器。3.3 地址欄、導(dǎo)航與進(jìn)度顯示1. 地址欄與導(dǎo)航在主框架上添加一個(gè)編輯框地址欄和一個(gè)“轉(zhuǎn)到”按鈕。當(dāng)用戶在地址欄輸入U(xiǎn)RL并回車或點(diǎn)擊按鈕時(shí)void CMainFrame::OnGo() { CString strUrl; m_wndAddressBar.GetWindowText(strUrl); if (!strUrl.IsEmpty()) { if (m_pActiveView) { // 簡單的URL格式檢查與補(bǔ)全 if (strUrl.Find(_T(://)) -1) { strUrl _T(http://) strUrl; } m_pActiveView-Navigate2(strUrl, 0, NULL); } } }同時(shí)在CHtmlViewEx::OnBeforeNavigate2中可以將正在導(dǎo)航的URL實(shí)時(shí)更新到地址欄提供即時(shí)反饋。2. 進(jìn)度顯示與標(biāo)題更新通過處理CHtmlViewEx的OnProgressChange和OnTitleChange事件可以更新狀態(tài)欄或標(biāo)簽頁的標(biāo)題。void CHtmlViewEx::OnProgressChange(long nProgress, long nProgressMax) { CMainFrame* pMain (CMainFrame*)AfxGetMainWnd(); if (pMain nProgressMax 0) { int nPercent (int)((nProgress * 100) / nProgressMax); pMain-SetProgress(nPercent); // 更新主框架進(jìn)度條 } } void CHtmlViewEx::OnTitleChange(LPCTSTR lpszText) { CHtmlView::OnTitleChange(lpszText); // 發(fā)送自定義消息給主框架更新對應(yīng)標(biāo)簽的標(biāo)題 // ... (代碼如前所述) }標(biāo)簽頁的標(biāo)題通常顯示為網(wǎng)頁標(biāo)題GetLocationName或URLGetLocationURL。一個(gè)常見的優(yōu)化是當(dāng)標(biāo)題過長時(shí)在標(biāo)簽上顯示省略形式。4. 高級功能與穩(wěn)定性加固4.1 崩潰轉(zhuǎn)儲(chǔ)Dump文件生成“vc 崩潰生成調(diào)試文件”是調(diào)試復(fù)雜ActiveX控件問題的生命線。當(dāng)瀏覽器控件因網(wǎng)頁腳本或插件崩潰時(shí)我們需要捕獲現(xiàn)場。1. 設(shè)置異常處理器在應(yīng)用程序初始化時(shí)如CWinApp::InitInstance中使用SetUnhandledExceptionFilter設(shè)置頂層的異常處理函數(shù)。// 全局異常處理函數(shù) LONG WINAPI MyUnhandledExceptionFilter(struct _EXCEPTION_POINTERS* pExceptionInfo) { // 生成Dump文件 GenerateMiniDump(pExceptionInfo); // 可以在這里記錄日志或嘗試恢復(fù) // ... // 返回EXCEPTION_EXECUTE_HANDLER會(huì)讓程序調(diào)用ExitProcess通常我們讓默認(rèn)的CRT處理或彈框 return EXCEPTION_CONTINUE_SEARCH; } BOOL CMyBrowserApp::InitInstance() { // ... 其他初始化 ::SetUnhandledExceptionFilter(MyUnhandledExceptionFilter); // ... }2. 生成MiniDump文件你需要鏈接DbgHelp.lib并調(diào)用MiniDumpWriteDump函數(shù)。#include DbgHelp.h #pragma comment(lib, DbgHelp.lib) void GenerateMiniDump(struct _EXCEPTION_POINTERS* pExceptionInfo) { TCHAR szDumpPath[MAX_PATH]; GetModuleFileName(NULL, szDumpPath, MAX_PATH); PathRemoveFileSpec(szDumpPath); // 去掉文件名得到目錄 PathAppend(szDumpPath, _T(CrashDumps)); CreateDirectory(szDumpPath, NULL); // 創(chuàng)建崩潰轉(zhuǎn)儲(chǔ)目錄 SYSTEMTIME st; GetLocalTime(st); TCHAR szFileName[MAX_PATH]; _stprintf_s(szFileName, _T(%s\\BrowserCrash_%04d%02d%02d_%02d%02d%02d.dmp), szDumpPath, st.wYear, st.wMonth, st.wDay, st.wHour, st.wMinute, st.wSecond); HANDLE hDumpFile CreateFile(szFileName, GENERIC_WRITE, 0, NULL, CREATE_ALWAYS, FILE_ATTRIBUTE_NORMAL, NULL); if (hDumpFile ! INVALID_HANDLE_VALUE) { MINIDUMP_EXCEPTION_INFORMATION dumpInfo; dumpInfo.ThreadId GetCurrentThreadId(); dumpInfo.ExceptionPointers pExceptionInfo; dumpInfo.ClientPointers TRUE; // 生成包含完整內(nèi)存、句柄、線程等信息的MiniDump便于事后分析 MiniDumpWriteDump(GetCurrentProcess(), GetCurrentProcessId(), hDumpFile, (MINIDUMP_TYPE)(MiniDumpWithDataSegs | MiniDumpWithHandleData | MiniDumpWithUnloadedModules | MiniDumpWithFullMemoryInfo | MiniDumpWithThreadInfo), dumpInfo, NULL, NULL); CloseHandle(hDumpFile); } }注意事項(xiàng)生成完整內(nèi)存轉(zhuǎn)儲(chǔ)MiniDumpWithFullMemory文件會(huì)非常大但信息最全。在生產(chǎn)環(huán)境中可以根據(jù)需要選擇適當(dāng)?shù)腗INIDUMP_TYPE。分析Dump文件需要使用WinDbg或Visual Studio并加載與你編譯環(huán)境匹配的符號(hào)文件.pdb。4.2 腳本與本地代碼交互這是瀏覽器控件最強(qiáng)大的功能之一。你可以通過IDispatch接口向網(wǎng)頁腳本暴露一個(gè)本地對象通常是一個(gè)COM對象實(shí)現(xiàn)JavaScript調(diào)用C函數(shù)。1. 創(chuàng)建可腳本化的COM對象使用ATL或純COM創(chuàng)建一個(gè)實(shí)現(xiàn)IDispatch接口的COM對象。假設(shè)我們創(chuàng)建一個(gè)名為HostObject的對象它有一個(gè)方法ShowMessage。// 使用ATL簡化假設(shè)有類CHostObject STDMETHODIMP CHostObject::ShowMessage(BSTR bstrMsg) { CString strMsg(bstrMsg); AfxMessageBox(strMsg); return S_OK; }2. 將對象暴露給網(wǎng)頁在CHtmlViewEx::OnDocumentComplete中當(dāng)文檔加載完成時(shí)獲取文檔的IHTMLDocument2接口并將我們的對象設(shè)置為外部對象。void CHtmlViewEx::OnDocumentComplete(LPCTSTR lpszURL) { CHtmlView::OnDocumentComplete(lpszURL); LPDISPATCH pDisp GetHtmlDocument(); if (pDisp) { IHTMLDocument2* pDoc NULL; if (SUCCEEDED(pDisp-QueryInterface(IID_IHTMLDocument2, (void**)pDoc))) { // 創(chuàng)建我們的HostObject實(shí)例 CComPtrIHostObject spHostObj; if (SUCCEEDED(spHostObj.CoCreateInstance(__uuidof(HostObject)))) { // 設(shè)置為window.external對象傳統(tǒng)方式IE支持 VARIANT var; var.vt VT_DISPATCH; var.pdispVal spHostObj; pDoc-SetProperty(CComBSTR(external), var); // 或者更現(xiàn)代的方式是注入到window對象的一個(gè)屬性中 IDispatchEx* pDispEx NULL; if (SUCCEEDED(pDoc-QueryInterface(IID_IDispatchEx, (void**)pDispEx))) { DISPID dispid; if (SUCCEEDED(pDispEx-GetDispID(CComBSTR(LmyHost), fdexNameEnsure, dispid))) { DISPPARAMS params {0}; VARIANT varResult; varResult.vt VT_DISPATCH; varResult.pdispVal spHostObj; pDispEx-InvokeEx(dispid, LOCALE_USER_DEFAULT, DISPATCH_PROPERTYPUT, params, varResult, NULL, NULL); } pDispEx-Release(); } } pDoc-Release(); } pDisp-Release(); } }現(xiàn)在網(wǎng)頁中的JavaScript就可以通過window.external.ShowMessage(Hello)或window.myHost.ShowMessage(Hello)來調(diào)用本地代碼了。安全警告無限制地暴露本地接口給網(wǎng)頁是極度危險(xiǎn)的。務(wù)必對傳入的參數(shù)進(jìn)行嚴(yán)格的驗(yàn)證和清理避免腳本注入攻擊。最好只暴露必要的、功能受限的接口。4.3 多進(jìn)程與沙箱隔離的思考原生的WebBrowser控件運(yùn)行在宿主進(jìn)程內(nèi)。這意味著一個(gè)標(biāo)簽頁的崩潰例如一個(gè)錯(cuò)誤的ActiveX插件可能導(dǎo)致整個(gè)瀏覽器進(jìn)程崩潰。對于追求穩(wěn)定性的多頁瀏覽器這是一個(gè)嚴(yán)重缺陷。進(jìn)階思路進(jìn)程外激活Out-of-Process Activation你可以通過COM的CoCreateInstance并指定CLSCTX_LOCAL_SERVER嘗試將WebBrowser控件創(chuàng)建在一個(gè)獨(dú)立的進(jìn)程中即啟動(dòng)一個(gè)iexplore.exe的實(shí)例進(jìn)行嵌入。但這非常復(fù)雜需要處理大量的進(jìn)程間通信IPC并且失去了對控件深度的控制。更現(xiàn)實(shí)的方案基于現(xiàn)有內(nèi)核封裝這也是為什么現(xiàn)代瀏覽器包括使用CEF或WebView2的應(yīng)用都采用多進(jìn)程架構(gòu)。對于VC項(xiàng)目如果你需要現(xiàn)代Web標(biāo)準(zhǔn)支持和穩(wěn)定性強(qiáng)烈建議直接使用CEF或WebView2。它們封裝了Chromium內(nèi)核天然支持多進(jìn)程、沙箱、現(xiàn)代Web API并提供了C接口。你的VC項(xiàng)目將從“實(shí)現(xiàn)瀏覽器外殼”轉(zhuǎn)變?yōu)椤凹蔀g覽器內(nèi)核”將精力集中在業(yè)務(wù)邏輯而非底層渲染引擎的穩(wěn)定性上。5. 常見問題排查與調(diào)試技巧5.1 運(yùn)行時(shí)庫缺失與版本沖突問題程序在開發(fā)機(jī)運(yùn)行正常拷貝到其他電腦提示“找不到msvcp140.dll”或“應(yīng)用程序無法正常啟動(dòng)(0xc000007b)”。排查確認(rèn)編譯選項(xiàng)檢查項(xiàng)目屬性中“C/C - 代碼生成 - 運(yùn)行時(shí)庫”的設(shè)置。如果是/MD或/MDd目標(biāo)機(jī)器需要安裝對應(yīng)版本的VC Redistributable。檢查依賴使用Dependency Walker或Visual Studio自帶的dumpbin /dependents your.exe命令查看exe依賴的DLL。確保所有msvcp*,vcruntime*,ucrtbase*等DLL在目標(biāo)機(jī)器上存在且版本匹配。統(tǒng)一部署對于/MD編譯的程序在安裝包中捆綁對應(yīng)版本的VC_redist.x64.exe或x86并靜默安裝/install /quiet /norestart。技巧在Debug版本中可以故意使用/MDd這樣在缺少Debug版運(yùn)行庫的機(jī)器上會(huì)立即報(bào)錯(cuò)避免將Debug版本誤當(dāng)成Release版本發(fā)布。5.2 WebBrowser控件白屏或?qū)Ш绞栴}瀏覽器控件顯示空白或?qū)Ш綍r(shí)沒有任何反應(yīng)。排查檢查URL格式確保傳遞給Navigate2的URL是完整的包含協(xié)議頭http://或https://。對于本地文件使用file://協(xié)議。檢查網(wǎng)絡(luò)和代理WebBrowser控件使用系統(tǒng)IE的代理設(shè)置。如果機(jī)器處于需要代理的網(wǎng)絡(luò)環(huán)境控件可能無法連接?？梢酝ㄟ^IWebBrowser2的put_Silent屬性設(shè)置為VARIANT_TRUE來抑制腳本錯(cuò)誤彈窗但不會(huì)解決網(wǎng)絡(luò)問題。兼容性模式某些網(wǎng)站可能需要特定的文檔模式。你可以嘗試通過注冊表或組策略設(shè)置IE的兼容性視圖或者在代碼中通過發(fā)送WM_SETTINGCHANGE消息來刷新設(shè)置但這通常影響整個(gè)系統(tǒng)。ActiveX過濾與安全設(shè)置檢查IE的Internet選項(xiàng)中的安全設(shè)置確保ActiveX控件和插件已啟用。過高的安全級別可能阻止控件運(yùn)行。5.3 腳本錯(cuò)誤與崩潰問題訪問某些網(wǎng)頁時(shí)頻繁彈出腳本錯(cuò)誤對話框甚至導(dǎo)致程序崩潰。處理禁用腳本錯(cuò)誤提示在CHtmlViewEx初始化時(shí)獲取IWebBrowser2接口并設(shè)置Silent屬性。IWebBrowser2* pBrowser GetIWebBrowser2(); if (pBrowser) { VARIANT_BOOL varSilent VARIANT_TRUE; pBrowser-put_Silent(varSilent); }異常捕獲如4.1節(jié)所述設(shè)置全局異常過濾器生成Dump文件。這是定位崩潰點(diǎn)的最關(guān)鍵手段。啟用腳本調(diào)試開發(fā)時(shí)在IE設(shè)置中啟用腳本調(diào)試Internet選項(xiàng) - 高級 - 禁用腳本調(diào)試(Internet Explorer) 取消勾選。這樣當(dāng)腳本錯(cuò)誤發(fā)生時(shí)會(huì)啟動(dòng)Visual Studio進(jìn)行調(diào)試。但這需要安裝VS且對最終用戶不適用。5.4 內(nèi)存泄漏排查瀏覽器控件和COM對象容易導(dǎo)致內(nèi)存泄漏。工具Visual Studio 內(nèi)存診斷工具在Debug模式下運(yùn)行退出時(shí)在輸出窗口查看是否有檢測到的內(nèi)存塊泄漏。CRT調(diào)試堆在stdafx.h開頭定義#define _CRTDBG_MAP_ALLOC并包含crtdbg.h。在程序退出前調(diào)用_CrtDumpMemoryLeaks()。COM對象泄漏更棘手。確保每個(gè)通過QueryInterface獲得的接口指針在不再使用時(shí)都調(diào)用Release()。使用CComPtr、CComQIPtr等ATL智能指針可以極大減少此類錯(cuò)誤。一個(gè)典型場景在事件處理函數(shù)中獲取了文檔接口IHTMLDocument2使用完后忘記Release。務(wù)必成對調(diào)用AddRef/Release或使用智能指針管理生命周期。5.5 快捷鍵與焦點(diǎn)管理混亂問題自定義的快捷鍵如CtrlT有時(shí)不生效或者焦點(diǎn)在地址欄和網(wǎng)頁之間切換時(shí)行為異常。解決焦點(diǎn)判斷在PreTranslateMessage中精確判斷當(dāng)前焦點(diǎn)所在的窗口。使用::GetFocus()獲取焦點(diǎn)窗口句柄再用CWnd::FromHandle轉(zhuǎn)換為CWnd指針通過GetParent()或GetOwner()判斷其所屬關(guān)系。加速器表優(yōu)先級確保主框架的加速器表m_hAccelTable已正確加載。TranslateAccelerator應(yīng)在PreTranslateMessage中盡早調(diào)用。瀏覽器控件自身快捷鍵記住WebBrowser控件會(huì)吞噬很多快捷鍵。如果你的框架快捷鍵與瀏覽器沖突如CtrlF你可能需要子類化瀏覽器控件的窗口過程GetWindowLongPtr/SetWindowLongPtrwithGWLP_WNDPROC來攔截特定消息但這屬于高級技巧需謹(jǐn)慎使用。通過這個(gè)項(xiàng)目的實(shí)踐你收獲的將不僅僅是一個(gè)可運(yùn)行的多頁瀏覽器。你深入了MFC的窗口管理、消息機(jī)制實(shí)踐了COM客戶端編程處理了復(fù)雜的異步事件和資源管理并觸及了桌面應(yīng)用部署、調(diào)試和穩(wěn)定性保障的諸多核心議題。雖然技術(shù)棧略顯“傳統(tǒng)”但其蘊(yùn)含的Windows桌面開發(fā)精髓至今仍在許多工業(yè)軟件、專業(yè)工具中發(fā)揮著重要作用。當(dāng)你下次再遇到VC運(yùn)行庫問題或者需要調(diào)試一個(gè)復(fù)雜的ActiveX控件時(shí)這段經(jīng)歷將成為你最寶貴的經(jīng)驗(yàn)。 VC++多頁瀏覽器開發(fā)實(shí)戰(zhàn)：MFC與WebBrowser控件深度解析
1. 項(xiàng)目概述為什么用VC寫一個(gè)自己的多頁瀏覽器如果你是一名Windows平臺(tái)的C開發(fā)者尤其是經(jīng)歷過MFC、ATL時(shí)代的“老炮兒”看到“VC實(shí)現(xiàn)的多網(wǎng)頁瀏覽器”這個(gè)標(biāo)題可能會(huì)會(huì)心一笑。這不僅僅是一個(gè)課程設(shè)計(jì)或畢業(yè)項(xiàng)目它更像是一個(gè)時(shí)代的縮影和一次技術(shù)的深度回溯。在如今Electron、CEFChromium Embedded Framework大行其道的年代從頭用VC這里通常指Visual C特別是其經(jīng)典的MFC框架打造一個(gè)瀏覽器聽起來有些“復(fù)古”但其背后的技術(shù)價(jià)值和學(xué)習(xí)意義遠(yuǎn)超一個(gè)簡單的應(yīng)用本身。這個(gè)項(xiàng)目的核心是深入Windows桌面應(yīng)用開發(fā)的核心腹地。它不依賴于任何現(xiàn)成的瀏覽器內(nèi)核封裝意味著你需要直面WebBrowser控件或更底層的COM接口、處理多文檔界面MDI/Tab、管理異步導(dǎo)航事件、處理腳本交互等一系列底層問題。通過它你能徹底理解一個(gè)瀏覽器外殼Browser Shell是如何工作的明白進(jìn)程內(nèi)In-Process與進(jìn)程外Out-of-ProcessActiveX控件的差異并深刻體會(huì)到Windows消息循環(huán)、COM線程模型與Web異步世界交織時(shí)的復(fù)雜性。最近社區(qū)里關(guān)于VC運(yùn)行時(shí)庫安裝、調(diào)試文件生成、快捷鍵實(shí)現(xiàn)的討論熱度不減這恰恰說明了仍有大量遺留或特定領(lǐng)域的桌面應(yīng)用依賴于這套技術(shù)棧。實(shí)現(xiàn)一個(gè)多頁瀏覽器正是串聯(lián)起這些知識(shí)點(diǎn)的最佳實(shí)踐你需要處理運(yùn)行時(shí)庫的依賴確保程序分發(fā)到用戶電腦上能正常運(yùn)行你需要生成詳細(xì)的調(diào)試信息以應(yīng)對瀏覽器控件那令人頭疼的崩潰問題你還需要設(shè)計(jì)一套高效的快捷鍵系統(tǒng)來管理多個(gè)標(biāo)簽頁的切換、刷新與關(guān)閉。所以這不僅僅是一個(gè)瀏覽器它是一個(gè)Windows桌面開發(fā)技術(shù)的綜合演練場。接下來我將帶你從零開始拆解其中的每一個(gè)關(guān)鍵技術(shù)環(huán)節(jié)分享那些官方文檔不會(huì)寫的實(shí)操細(xì)節(jié)和踩坑經(jīng)驗(yàn)。2. 核心架構(gòu)設(shè)計(jì)從單窗口到多頁簽的演進(jìn)之路2.1 技術(shù)選型為什么是MFC與WebBrowser控件在VC生態(tài)中實(shí)現(xiàn)瀏覽器功能首選的快速方案是使用MFCMicrosoft Foundation Classes和其封裝的CHtmlView類或者更底層地使用ActiveX控件Microsoft Web Browser。CHtmlView本質(zhì)上就是一個(gè)封裝了WebBrowser ActiveX控件的視圖類它提供了諸如Navigate、GoBack、Refresh等高層接口極大簡化了開發(fā)。為什么這么選原生與高效WebBrowser控件實(shí)際上是IEInternet Explorer的渲染引擎Trident的ActiveX封裝。它深度集成于Windows系統(tǒng)無需額外分發(fā)巨大的瀏覽器內(nèi)核程序體積小巧。COM技術(shù)典范瀏覽器控件是一個(gè)典型的COM組件通過VC進(jìn)行開發(fā)是學(xué)習(xí)并實(shí)踐COM客戶端編程的絕佳案例。你需要處理接口指針如IWebBrowser2、處理連接點(diǎn)Connection Points以接收事件如BeforeNavigate2、DocumentComplete。與MFC天然契合MFC對ActiveX控件有良好的支持通過ClassWizard可以輕松為控件添加事件處理映射和消息映射將COM事件轉(zhuǎn)換為熟悉的MFC消息處理函數(shù)。注意WebBrowser控件依賴的IE內(nèi)核已停止更新對現(xiàn)代Web標(biāo)準(zhǔn)如CSS3、ES6支持有限。此方案適用于開發(fā)內(nèi)網(wǎng)應(yīng)用、需要與本地COM組件深度交互的專用瀏覽器或作為學(xué)習(xí)項(xiàng)目。若追求現(xiàn)代Web兼容性應(yīng)考慮CEF或WebView2。2.2 界面架構(gòu)SDITab Control vs. MDI多頁瀏覽器的核心是同時(shí)管理多個(gè)網(wǎng)頁實(shí)例。在MFC中主要有兩種界面架構(gòu)思路方案一SDI Tab Control推薦這是目前主流瀏覽器的實(shí)現(xiàn)方式。創(chuàng)建一個(gè)單文檔界面SDI在主框架窗口CMainFrame上放置一個(gè)標(biāo)簽控件CTabCtrl。每個(gè)標(biāo)簽頁對應(yīng)一個(gè)獨(dú)立的瀏覽器視圖CHtmlView或其派生類窗口。優(yōu)點(diǎn)界面現(xiàn)代用戶體驗(yàn)好標(biāo)簽管理邏輯清晰內(nèi)存和資源管理相對直接每個(gè)標(biāo)簽頁是一個(gè)獨(dú)立的View窗口。實(shí)現(xiàn)關(guān)鍵需要?jiǎng)討B(tài)創(chuàng)建、顯示、隱藏和銷毀承載CHtmlView的子窗口并同步更新標(biāo)簽控件的顯示。方案二多文檔界面MDI利用MFC內(nèi)置的MDI框架每個(gè)網(wǎng)頁在一個(gè)獨(dú)立的子窗口CMDIChildWnd中打開每個(gè)子窗口內(nèi)包含一個(gè)CHtmlView。優(yōu)點(diǎn)MFC原生支持窗口管理層疊、平鋪由框架完成實(shí)現(xiàn)快速。缺點(diǎn)每個(gè)網(wǎng)頁都是一個(gè)完整的帶邊框、標(biāo)題欄的窗口不符合現(xiàn)代瀏覽器的使用習(xí)慣資源開銷相對較大。我們的選擇采用SDI Tab Control方案。它更貼近真實(shí)產(chǎn)品也讓我們能更深入地控制窗口和消息的生命周期。2.3 程序生命周期與運(yùn)行時(shí)庫考量在你開始編碼之前必須處理好VC運(yùn)行時(shí)庫Runtime Library的依賴問題。這是無數(shù)新手部署程序時(shí)遇到的第一個(gè)“攔路虎”。你的程序在編譯時(shí)需要鏈接C/C運(yùn)行時(shí)庫。編譯選項(xiàng)通常在“項(xiàng)目屬性 - C/C - 代碼生成 - 運(yùn)行時(shí)庫”中設(shè)置/MD或/MDd動(dòng)態(tài)鏈接到運(yùn)行時(shí)庫的多線程DLL版本。你的程序會(huì)依賴msvcrt.dll等系統(tǒng)DLL。發(fā)布時(shí)目標(biāo)機(jī)器上必須存在對應(yīng)版本的VC Redistributable Package。/MT或/MTd靜態(tài)鏈接運(yùn)行時(shí)庫。運(yùn)行時(shí)庫代碼會(huì)被打包進(jìn)你的EXE程序體積變大但部署簡單無需額外安裝運(yùn)行庫。實(shí)操心得 對于像瀏覽器這樣的項(xiàng)目我強(qiáng)烈建議在開發(fā)調(diào)試階段使用**/MDd**Debug動(dòng)態(tài)鏈接以方便調(diào)試。在發(fā)布Release版本時(shí)權(quán)衡部署便利性和程序體積如果目標(biāo)環(huán)境確定如企業(yè)內(nèi)網(wǎng)且已統(tǒng)一安裝對應(yīng)版本的VC運(yùn)行庫可使用**/MD**。如果希望用戶“開箱即用”避免“缺少vcruntime140.dll”的錯(cuò)誤可以選擇**/MT**進(jìn)行靜態(tài)鏈接。但要注意靜態(tài)鏈接可能會(huì)帶來一些許可合規(guī)性上的考量需閱讀VC運(yùn)行時(shí)庫的許可協(xié)議。從網(wǎng)絡(luò)熱詞可以看到微軟官網(wǎng)提供了從VC 2005到最新v14VS2017-2026的全套可再發(fā)行組件包。如果你選擇動(dòng)態(tài)鏈接/MD在制作安裝包時(shí)務(wù)必包含或引導(dǎo)用戶安裝對應(yīng)版本的VC_redist.x64.exe或VC_redist.x86.exe。3. 核心模塊實(shí)現(xiàn)詳解3.1 主框架與標(biāo)簽頁管理首先我們使用AppWizard創(chuàng)建一個(gè)基于對話框Dialog-based或單文檔SDI的MFC項(xiàng)目。為了更好的控制我傾向于從CFrameWnd派生主窗口。1. 主框架窗口CMainFrame設(shè)計(jì)在主框架中我們創(chuàng)建以下核心成員class CMainFrame : public CFrameWnd { // ... private: CTabCtrl m_wndTab; // 標(biāo)簽控件 CImageList m_tabIcons; // 標(biāo)簽圖標(biāo)列表 CMapUINT_PTR, UINT_PTR, CHtmlViewEx*, CHtmlViewEx* m_mapTabIdToView; // 標(biāo)簽ID到視圖的映射 CHtmlViewEx* m_pActiveView; // 當(dāng)前活動(dòng)視圖 int m_nNextTabId; // 下一個(gè)標(biāo)簽ID };CHtmlViewEx是我們從CHtmlView派生的自定義類用于增強(qiáng)功能。2. 標(biāo)簽頁的動(dòng)態(tài)創(chuàng)建與關(guān)聯(lián)當(dāng)用戶點(diǎn)擊“新建標(biāo)簽頁”按鈕或菜單時(shí)執(zhí)行以下操作void CMainFrame::OnNewTab() { // 1. 為新的瀏覽器視圖創(chuàng)建容器窗口通常是一個(gè)Pane或靜態(tài)控件區(qū)域 CRect rect; m_wndClientArea.GetClientRect(rect); // 假設(shè)m_wndClientArea是標(biāo)簽頁下方的內(nèi)容區(qū) CHtmlViewEx* pNewView new CHtmlViewEx; // 2. 創(chuàng)建視圖窗口注意樣式要包含WS_CHILD并使其不可見初始 if (!pNewView-Create(NULL, NULL, WS_CHILD | WS_VISIBLE, rect, this, IDC_BROWSER_VIEW_BASE m_nNextTabId)) { delete pNewView; return; } // 3. 導(dǎo)航到初始頁面如空白頁或主頁 pNewView-Navigate2(_T(about:blank), 0, NULL); // 4. 向標(biāo)簽控件添加新標(biāo)簽 TCITEM tci {0}; tci.mask TCIF_TEXT | TCIF_IMAGE; CString strTitle _T(新標(biāo)簽頁); tci.pszText strTitle.GetBuffer(); tci.iImage 0; // 使用圖標(biāo)列表中的第一個(gè)圖標(biāo)如地球圖標(biāo) int nTabIndex m_wndTab.InsertItem(m_wndTab.GetItemCount(), tci); strTitle.ReleaseBuffer(); // 5. 建立映射關(guān)系并激活此標(biāo)簽 UINT_PTR nTabId (UINT_PTR)pNewView-GetSafeHwnd(); // 或用自增ID m_mapTabIdToView.SetAt(nTabId, pNewView); m_wndTab.SetItemData(nTabIndex, nTabId); // 6. 隱藏所有視圖只顯示當(dāng)前活動(dòng)的 ShowViewForTab(nTabIndex); m_nNextTabId; }關(guān)鍵點(diǎn)CHtmlView::Create的最后一個(gè)參數(shù)是子窗口ID這里我們使用一個(gè)基準(zhǔn)ID動(dòng)態(tài)生成便于消息路由。視圖窗口的父窗口必須是主框架或一個(gè)特定的客戶區(qū)容器不能是標(biāo)簽控件本身。3. 標(biāo)簽切換與視圖顯示響應(yīng)標(biāo)簽控件的TCN_SELCHANGE通知消息void CMainFrame::OnTabSelChange(NMHDR* pNMHDR, LRESULT* pResult) { int nSel m_wndTab.GetCurSel(); if (nSel ! -1) { ShowViewForTab(nSel); } *pResult 0; } void CMainFrame::ShowViewForTab(int nTabIndex) { UINT_PTR nTabId m_wndTab.GetItemData(nTabIndex); CHtmlViewEx* pView NULL; if (m_mapTabIdToView.Lookup(nTabId, pView) pView) { // 隱藏所有視圖 POSITION pos m_mapTabIdToView.GetStartPosition(); UINT_PTR key; CHtmlViewEx* pTempView; while (pos ! NULL) { m_mapTabIdToView.GetNextAssoc(pos, key, pTempView); if (pTempView pTempView-GetSafeHwnd()) { pTempView-ShowWindow(SW_HIDE); } } // 顯示并激活選中的視圖 pView-ShowWindow(SW_SHOW); pView-SetFocus(); m_pActiveView pView; // 更新地址欄、標(biāo)題欄等UI根據(jù)pView的當(dāng)前URL和標(biāo)題 UpdateAddressBar(pView-GetLocationURL()); UpdateWindowTitle(pView-GetLocationName()); } }3.2 增強(qiáng)型瀏覽器視圖類CHtmlViewEx直接使用CHtmlView功能有限我們需要派生一個(gè)類來增強(qiáng)它特別是處理事件和擴(kuò)展接口。1. 獲取并處理WebBrowser事件CHtmlView通過OnBeforeNavigate2等虛函數(shù)提供事件通知但有時(shí)我們需要更精細(xì)的控制或訪問底層接口。class CHtmlViewEx : public CHtmlView { protected: DECLARE_DYNCREATE(CHtmlViewEx) DECLARE_EVENTSINK_MAP() // 聲明事件接收映射 // 覆蓋基類虛函數(shù)以處理導(dǎo)航事件 virtual void OnBeforeNavigate2(LPCTSTR lpszURL, DWORD nFlags, LPCTSTR lpszTargetFrameName, CByteArray baPostedData, LPCTSTR lpszHeaders, BOOL* pbCancel); virtual void OnDocumentComplete(LPCTSTR lpszURL); virtual void OnTitleChange(LPCTSTR lpszText); virtual void OnNavigateComplete2(LPCTSTR strURL); // 添加事件接收器以處理更多事件如NewWindow3阻止彈出窗口 BEGIN_EVENTSINK_MAP(CHtmlViewEx, CHtmlView) ON_EVENT(CHtmlViewEx, AFX_IDW_PANE_FIRST, 259 /* DISPID_NEWWINDOW3 */, OnNewWindow3, VTS_DISPATCH VTS_PBOOL VTS_DWORD VTS_BSTR VTS_BSTR) END_EVENTSINK_MAP() void OnNewWindow3(LPDISPATCH* ppDisp, BOOL* Cancel, DWORD dwFlags, LPCTSTR bstrUrlContext, LPCTSTR bstrUrl); // 獲取底層IWebBrowser2接口 IWebBrowser2* GetIWebBrowser2() const { return m_pBrowserApp; } private: CString m_strCurrentTitle; };在OnDocumentComplete或OnTitleChange中我們可以通知主框架更新對應(yīng)標(biāo)簽的標(biāo)題void CHtmlViewEx::OnTitleChange(LPCTSTR lpszText) { CHtmlView::OnTitleChange(lpszText); m_strCurrentTitle lpszText; // 獲取主框架并發(fā)送自定義消息通知標(biāo)題改變 CMainFrame* pMain (CMainFrame*)AfxGetMainWnd(); if (pMain) { pMain-PostMessage(WM_USER_UPDATE_TAB_TITLE, (WPARAM)GetSafeHwnd(), (LPARAM)(LPCTSTR)m_strCurrentTitle); } }2. 實(shí)現(xiàn)快捷鍵支持網(wǎng)絡(luò)熱詞中提到了“vc 編程中如何實(shí)現(xiàn)快捷鍵”這在瀏覽器中至關(guān)重要。快捷鍵處理通常在主框架級別進(jìn)行。首先在資源文件中定義快捷鍵表Accelerator Table添加如CtrlT新建標(biāo)簽、CtrlW關(guān)閉標(biāo)簽、CtrlTab下一個(gè)標(biāo)簽、CtrlShiftTab上一個(gè)標(biāo)簽、F5刷新、CtrlF5強(qiáng)制刷新等條目。然后在主框架的PreTranslateMessage函數(shù)中翻譯快捷鍵BOOL CMainFrame::PreTranslateMessage(MSG* pMsg) { // 先讓快捷鍵表處理 if (m_hAccelTable ::TranslateAccelerator(m_hWnd, m_hAccelTable, pMsg)) return TRUE; // 如果當(dāng)前活動(dòng)視圖有輸入焦點(diǎn)可以優(yōu)先讓視圖處理例如Web頁面內(nèi)的CtrlF查找 if (m_pActiveView m_pActiveView-GetSafeHwnd()) { // 可以檢查消息是否是鍵盤消息并判斷目標(biāo)窗口是否為瀏覽器視圖或其子控件 if (pMsg-message WM_KEYFIRST pMsg-message WM_KEYLAST) { HWND hWndFocus ::GetFocus(); if (m_pActiveView-IsChild(CWnd::FromHandle(hWndFocus))) { // 瀏覽器控件自身可能處理了一些快捷鍵如CtrlP打印這里可以選擇不攔截 // 或者我們可以攔截特定的、需要框架處理的快捷鍵 if (pMsg-message WM_KEYDOWN) { BOOL bCtrl (::GetKeyState(VK_CONTROL) 0x8000); switch (pMsg-wParam) { case T: if (bCtrl) { OnNewTab(); return TRUE; } break; case W: if (bCtrl) { OnCloseCurrentTab(); return TRUE; } break; case VK_TAB: if (bCtrl) { CycleTabs(bCtrl 0x8000, ::GetKeyState(VK_SHIFT) 0x8000); return TRUE; } break; } } } } } return CFrameWnd::PreTranslateMessage(pMsg); }實(shí)操心得處理瀏覽器快捷鍵時(shí)要注意消息傳遞的優(yōu)先級。WebBrowser控件自身會(huì)處理很多快捷鍵如CtrlF、CtrlP。我們的框架快捷鍵如CtrlT/W應(yīng)該在PreTranslateMessage中盡早處理而頁面內(nèi)的快捷鍵則交給瀏覽器控件。TranslateAccelerator是處理標(biāo)準(zhǔn)菜單快捷鍵的利器。3.3 地址欄、導(dǎo)航與進(jìn)度顯示1. 地址欄與導(dǎo)航在主框架上添加一個(gè)編輯框地址欄和一個(gè)“轉(zhuǎn)到”按鈕。當(dāng)用戶在地址欄輸入U(xiǎn)RL并回車或點(diǎn)擊按鈕時(shí)void CMainFrame::OnGo() { CString strUrl; m_wndAddressBar.GetWindowText(strUrl); if (!strUrl.IsEmpty()) { if (m_pActiveView) { // 簡單的URL格式檢查與補(bǔ)全 if (strUrl.Find(_T(://)) -1) { strUrl _T(http://) strUrl; } m_pActiveView-Navigate2(strUrl, 0, NULL); } } }同時(shí)在CHtmlViewEx::OnBeforeNavigate2中可以將正在導(dǎo)航的URL實(shí)時(shí)更新到地址欄提供即時(shí)反饋。2. 進(jìn)度顯示與標(biāo)題更新通過處理CHtmlViewEx的OnProgressChange和OnTitleChange事件可以更新狀態(tài)欄或標(biāo)簽頁的標(biāo)題。void CHtmlViewEx::OnProgressChange(long nProgress, long nProgressMax) { CMainFrame* pMain (CMainFrame*)AfxGetMainWnd(); if (pMain nProgressMax 0) { int nPercent (int)((nProgress * 100) / nProgressMax); pMain-SetProgress(nPercent); // 更新主框架進(jìn)度條 } } void CHtmlViewEx::OnTitleChange(LPCTSTR lpszText) { CHtmlView::OnTitleChange(lpszText); // 發(fā)送自定義消息給主框架更新對應(yīng)標(biāo)簽的標(biāo)題 // ... (代碼如前所述) }標(biāo)簽頁的標(biāo)題通常顯示為網(wǎng)頁標(biāo)題GetLocationName或URLGetLocationURL。一個(gè)常見的優(yōu)化是當(dāng)標(biāo)題過長時(shí)在標(biāo)簽上顯示省略形式。4. 高級功能與穩(wěn)定性加固4.1 崩潰轉(zhuǎn)儲(chǔ)Dump文件生成“vc 崩潰生成調(diào)試文件”是調(diào)試復(fù)雜ActiveX控件問題的生命線。當(dāng)瀏覽器控件因網(wǎng)頁腳本或插件崩潰時(shí)我們需要捕獲現(xiàn)場。1. 設(shè)置異常處理器在應(yīng)用程序初始化時(shí)如CWinApp::InitInstance中使用SetUnhandledExceptionFilter設(shè)置頂層的異常處理函數(shù)。// 全局異常處理函數(shù) LONG WINAPI MyUnhandledExceptionFilter(struct _EXCEPTION_POINTERS* pExceptionInfo) { // 生成Dump文件 GenerateMiniDump(pExceptionInfo); // 可以在這里記錄日志或嘗試恢復(fù) // ... // 返回EXCEPTION_EXECUTE_HANDLER會(huì)讓程序調(diào)用ExitProcess通常我們讓默認(rèn)的CRT處理或彈框 return EXCEPTION_CONTINUE_SEARCH; } BOOL CMyBrowserApp::InitInstance() { // ... 其他初始化 ::SetUnhandledExceptionFilter(MyUnhandledExceptionFilter); // ... }2. 生成MiniDump文件你需要鏈接DbgHelp.lib并調(diào)用MiniDumpWriteDump函數(shù)。#include DbgHelp.h #pragma comment(lib, DbgHelp.lib) void GenerateMiniDump(struct _EXCEPTION_POINTERS* pExceptionInfo) { TCHAR szDumpPath[MAX_PATH]; GetModuleFileName(NULL, szDumpPath, MAX_PATH); PathRemoveFileSpec(szDumpPath); // 去掉文件名得到目錄 PathAppend(szDumpPath, _T(CrashDumps)); CreateDirectory(szDumpPath, NULL); // 創(chuàng)建崩潰轉(zhuǎn)儲(chǔ)目錄 SYSTEMTIME st; GetLocalTime(st); TCHAR szFileName[MAX_PATH]; _stprintf_s(szFileName, _T(%s\\BrowserCrash_%04d%02d%02d_%02d%02d%02d.dmp), szDumpPath, st.wYear, st.wMonth, st.wDay, st.wHour, st.wMinute, st.wSecond); HANDLE hDumpFile CreateFile(szFileName, GENERIC_WRITE, 0, NULL, CREATE_ALWAYS, FILE_ATTRIBUTE_NORMAL, NULL); if (hDumpFile ! INVALID_HANDLE_VALUE) { MINIDUMP_EXCEPTION_INFORMATION dumpInfo; dumpInfo.ThreadId GetCurrentThreadId(); dumpInfo.ExceptionPointers pExceptionInfo; dumpInfo.ClientPointers TRUE; // 生成包含完整內(nèi)存、句柄、線程等信息的MiniDump便于事后分析 MiniDumpWriteDump(GetCurrentProcess(), GetCurrentProcessId(), hDumpFile, (MINIDUMP_TYPE)(MiniDumpWithDataSegs | MiniDumpWithHandleData | MiniDumpWithUnloadedModules | MiniDumpWithFullMemoryInfo | MiniDumpWithThreadInfo), dumpInfo, NULL, NULL); CloseHandle(hDumpFile); } }注意事項(xiàng)生成完整內(nèi)存轉(zhuǎn)儲(chǔ)MiniDumpWithFullMemory文件會(huì)非常大但信息最全。在生產(chǎn)環(huán)境中可以根據(jù)需要選擇適當(dāng)?shù)腗INIDUMP_TYPE。分析Dump文件需要使用WinDbg或Visual Studio并加載與你編譯環(huán)境匹配的符號(hào)文件.pdb。4.2 腳本與本地代碼交互這是瀏覽器控件最強(qiáng)大的功能之一。你可以通過IDispatch接口向網(wǎng)頁腳本暴露一個(gè)本地對象通常是一個(gè)COM對象實(shí)現(xiàn)JavaScript調(diào)用C函數(shù)。1. 創(chuàng)建可腳本化的COM對象使用ATL或純COM創(chuàng)建一個(gè)實(shí)現(xiàn)IDispatch接口的COM對象。假設(shè)我們創(chuàng)建一個(gè)名為HostObject的對象它有一個(gè)方法ShowMessage。// 使用ATL簡化假設(shè)有類CHostObject STDMETHODIMP CHostObject::ShowMessage(BSTR bstrMsg) { CString strMsg(bstrMsg); AfxMessageBox(strMsg); return S_OK; }2. 將對象暴露給網(wǎng)頁在CHtmlViewEx::OnDocumentComplete中當(dāng)文檔加載完成時(shí)獲取文檔的IHTMLDocument2接口并將我們的對象設(shè)置為外部對象。void CHtmlViewEx::OnDocumentComplete(LPCTSTR lpszURL) { CHtmlView::OnDocumentComplete(lpszURL); LPDISPATCH pDisp GetHtmlDocument(); if (pDisp) { IHTMLDocument2* pDoc NULL; if (SUCCEEDED(pDisp-QueryInterface(IID_IHTMLDocument2, (void**)pDoc))) { // 創(chuàng)建我們的HostObject實(shí)例 CComPtrIHostObject spHostObj; if (SUCCEEDED(spHostObj.CoCreateInstance(__uuidof(HostObject)))) { // 設(shè)置為window.external對象傳統(tǒng)方式IE支持 VARIANT var; var.vt VT_DISPATCH; var.pdispVal spHostObj; pDoc-SetProperty(CComBSTR(external), var); // 或者更現(xiàn)代的方式是注入到window對象的一個(gè)屬性中 IDispatchEx* pDispEx NULL; if (SUCCEEDED(pDoc-QueryInterface(IID_IDispatchEx, (void**)pDispEx))) { DISPID dispid; if (SUCCEEDED(pDispEx-GetDispID(CComBSTR(LmyHost), fdexNameEnsure, dispid))) { DISPPARAMS params {0}; VARIANT varResult; varResult.vt VT_DISPATCH; varResult.pdispVal spHostObj; pDispEx-InvokeEx(dispid, LOCALE_USER_DEFAULT, DISPATCH_PROPERTYPUT, params, varResult, NULL, NULL); } pDispEx-Release(); } } pDoc-Release(); } pDisp-Release(); } }現(xiàn)在網(wǎng)頁中的JavaScript就可以通過window.external.ShowMessage(Hello)或window.myHost.ShowMessage(Hello)來調(diào)用本地代碼了。安全警告無限制地暴露本地接口給網(wǎng)頁是極度危險(xiǎn)的。務(wù)必對傳入的參數(shù)進(jìn)行嚴(yán)格的驗(yàn)證和清理避免腳本注入攻擊。最好只暴露必要的、功能受限的接口。4.3 多進(jìn)程與沙箱隔離的思考原生的WebBrowser控件運(yùn)行在宿主進(jìn)程內(nèi)。這意味著一個(gè)標(biāo)簽頁的崩潰例如一個(gè)錯(cuò)誤的ActiveX插件可能導(dǎo)致整個(gè)瀏覽器進(jìn)程崩潰。對于追求穩(wěn)定性的多頁瀏覽器這是一個(gè)嚴(yán)重缺陷。進(jìn)階思路進(jìn)程外激活Out-of-Process Activation你可以通過COM的CoCreateInstance并指定CLSCTX_LOCAL_SERVER嘗試將WebBrowser控件創(chuàng)建在一個(gè)獨(dú)立的進(jìn)程中即啟動(dòng)一個(gè)iexplore.exe的實(shí)例進(jìn)行嵌入。但這非常復(fù)雜需要處理大量的進(jìn)程間通信IPC并且失去了對控件深度的控制。更現(xiàn)實(shí)的方案基于現(xiàn)有內(nèi)核封裝這也是為什么現(xiàn)代瀏覽器包括使用CEF或WebView2的應(yīng)用都采用多進(jìn)程架構(gòu)。對于VC項(xiàng)目如果你需要現(xiàn)代Web標(biāo)準(zhǔn)支持和穩(wěn)定性強(qiáng)烈建議直接使用CEF或WebView2。它們封裝了Chromium內(nèi)核天然支持多進(jìn)程、沙箱、現(xiàn)代Web API并提供了C接口。你的VC項(xiàng)目將從“實(shí)現(xiàn)瀏覽器外殼”轉(zhuǎn)變?yōu)椤凹蔀g覽器內(nèi)核”將精力集中在業(yè)務(wù)邏輯而非底層渲染引擎的穩(wěn)定性上。5. 常見問題排查與調(diào)試技巧5.1 運(yùn)行時(shí)庫缺失與版本沖突問題程序在開發(fā)機(jī)運(yùn)行正常拷貝到其他電腦提示“找不到msvcp140.dll”或“應(yīng)用程序無法正常啟動(dòng)(0xc000007b)”。排查確認(rèn)編譯選項(xiàng)檢查項(xiàng)目屬性中“C/C - 代碼生成 - 運(yùn)行時(shí)庫”的設(shè)置。如果是/MD或/MDd目標(biāo)機(jī)器需要安裝對應(yīng)版本的VC Redistributable。檢查依賴使用Dependency Walker或Visual Studio自帶的dumpbin /dependents your.exe命令查看exe依賴的DLL。確保所有msvcp*,vcruntime*,ucrtbase*等DLL在目標(biāo)機(jī)器上存在且版本匹配。統(tǒng)一部署對于/MD編譯的程序在安裝包中捆綁對應(yīng)版本的VC_redist.x64.exe或x86并靜默安裝/install /quiet /norestart。技巧在Debug版本中可以故意使用/MDd這樣在缺少Debug版運(yùn)行庫的機(jī)器上會(huì)立即報(bào)錯(cuò)避免將Debug版本誤當(dāng)成Release版本發(fā)布。5.2 WebBrowser控件白屏或?qū)Ш绞栴}瀏覽器控件顯示空白或?qū)Ш綍r(shí)沒有任何反應(yīng)。排查檢查URL格式確保傳遞給Navigate2的URL是完整的包含協(xié)議頭http://或https://。對于本地文件使用file://協(xié)議。檢查網(wǎng)絡(luò)和代理WebBrowser控件使用系統(tǒng)IE的代理設(shè)置。如果機(jī)器處于需要代理的網(wǎng)絡(luò)環(huán)境控件可能無法連接?？梢酝ㄟ^IWebBrowser2的put_Silent屬性設(shè)置為VARIANT_TRUE來抑制腳本錯(cuò)誤彈窗但不會(huì)解決網(wǎng)絡(luò)問題。兼容性模式某些網(wǎng)站可能需要特定的文檔模式。你可以嘗試通過注冊表或組策略設(shè)置IE的兼容性視圖或者在代碼中通過發(fā)送WM_SETTINGCHANGE消息來刷新設(shè)置但這通常影響整個(gè)系統(tǒng)。ActiveX過濾與安全設(shè)置檢查IE的Internet選項(xiàng)中的安全設(shè)置確保ActiveX控件和插件已啟用。過高的安全級別可能阻止控件運(yùn)行。5.3 腳本錯(cuò)誤與崩潰問題訪問某些網(wǎng)頁時(shí)頻繁彈出腳本錯(cuò)誤對話框甚至導(dǎo)致程序崩潰。處理禁用腳本錯(cuò)誤提示在CHtmlViewEx初始化時(shí)獲取IWebBrowser2接口并設(shè)置Silent屬性。IWebBrowser2* pBrowser GetIWebBrowser2(); if (pBrowser) { VARIANT_BOOL varSilent VARIANT_TRUE; pBrowser-put_Silent(varSilent); }異常捕獲如4.1節(jié)所述設(shè)置全局異常過濾器生成Dump文件。這是定位崩潰點(diǎn)的最關(guān)鍵手段。啟用腳本調(diào)試開發(fā)時(shí)在IE設(shè)置中啟用腳本調(diào)試Internet選項(xiàng) - 高級 - 禁用腳本調(diào)試(Internet Explorer) 取消勾選。這樣當(dāng)腳本錯(cuò)誤發(fā)生時(shí)會(huì)啟動(dòng)Visual Studio進(jìn)行調(diào)試。但這需要安裝VS且對最終用戶不適用。5.4 內(nèi)存泄漏排查瀏覽器控件和COM對象容易導(dǎo)致內(nèi)存泄漏。工具Visual Studio 內(nèi)存診斷工具在Debug模式下運(yùn)行退出時(shí)在輸出窗口查看是否有檢測到的內(nèi)存塊泄漏。CRT調(diào)試堆在stdafx.h開頭定義#define _CRTDBG_MAP_ALLOC并包含crtdbg.h。在程序退出前調(diào)用_CrtDumpMemoryLeaks()。COM對象泄漏更棘手。確保每個(gè)通過QueryInterface獲得的接口指針在不再使用時(shí)都調(diào)用Release()。使用CComPtr、CComQIPtr等ATL智能指針可以極大減少此類錯(cuò)誤。一個(gè)典型場景在事件處理函數(shù)中獲取了文檔接口IHTMLDocument2使用完后忘記Release。務(wù)必成對調(diào)用AddRef/Release或使用智能指針管理生命周期。5.5 快捷鍵與焦點(diǎn)管理混亂問題自定義的快捷鍵如CtrlT有時(shí)不生效或者焦點(diǎn)在地址欄和網(wǎng)頁之間切換時(shí)行為異常。解決焦點(diǎn)判斷在PreTranslateMessage中精確判斷當(dāng)前焦點(diǎn)所在的窗口。使用::GetFocus()獲取焦點(diǎn)窗口句柄再用CWnd::FromHandle轉(zhuǎn)換為CWnd指針通過GetParent()或GetOwner()判斷其所屬關(guān)系。加速器表優(yōu)先級確保主框架的加速器表m_hAccelTable已正確加載。TranslateAccelerator應(yīng)在PreTranslateMessage中盡早調(diào)用。瀏覽器控件自身快捷鍵記住WebBrowser控件會(huì)吞噬很多快捷鍵。如果你的框架快捷鍵與瀏覽器沖突如CtrlF你可能需要子類化瀏覽器控件的窗口過程GetWindowLongPtr/SetWindowLongPtrwithGWLP_WNDPROC來攔截特定消息但這屬于高級技巧需謹(jǐn)慎使用。通過這個(gè)項(xiàng)目的實(shí)踐你收獲的將不僅僅是一個(gè)可運(yùn)行的多頁瀏覽器。你深入了MFC的窗口管理、消息機(jī)制實(shí)踐了COM客戶端編程處理了復(fù)雜的異步事件和資源管理并觸及了桌面應(yīng)用部署、調(diào)試和穩(wěn)定性保障的諸多核心議題。雖然技術(shù)棧略顯“傳統(tǒng)”但其蘊(yùn)含的Windows桌面開發(fā)精髓至今仍在許多工業(yè)軟件、專業(yè)工具中發(fā)揮著重要作用。當(dāng)你下次再遇到VC運(yùn)行庫問題或者需要調(diào)試一個(gè)復(fù)雜的ActiveX控件時(shí)這段經(jīng)歷將成為你最寶貴的經(jīng)驗(yàn)。