360 安全衛士介面技術揭秘：WebBrowser 控件載入 HTML 打造炫酷 UI

許多開發者好奇 360 軟體管家、安全衛士等產品的華麗介面是用何技術實現。本文分析其核心架構：以 C++/C# 為宿主，內嵌 WebBrowser (IE 內核) 或 CEF (Chromium 內核) 控件，載入本地/遠端 HTML5+CSS3+JS 頁面構建 UI，並透過 ObjectForScripting / JSBridge 實現前後端雙向通訊。

核心架構圖解

+---------------------+     COM/Interop      +--------------------------+
|  Native Host App    | <-----------------> |  WebBrowser / CEF Control |
|  (C++ MFC / C# WPF) |   JSBridge /        |  (HTML5 + CSS3 + JS UI)   |
|  - 業務邏輯          |   ObjectForScripting |  - 介面渲染               |
|  - 系統介面調用       |                     |  - 動畫/特效              |
+---------------------+                     +--------------------------+

主流實現方案對比

C# + WebBrowser 快速原型 (含雙向通訊)

// Form1.cs
public partial class Form1 : Form {
    public Form1() {
        InitializeComponent();
        webBrowser1.ObjectForScripting = new Bridge(this); // 註入 C# 物件給 JS
        webBrowser1.DocumentText = GetHtml();              // 載入本地 HTML 字串
        // 或 webBrowser1.Url = new Uri("file:///C:/ui/index.html");
    }

    // 供 JS 呼叫
    public void ShowMessage(string msg) {
        MessageBox.Show("JS 說: " + msg);
    }

    // C# 主動呼叫 JS
    private void btnCallJs_Click(object sender, EventArgs e) {
        webBrowser1.Document.InvokeScript("updateTitle", new object[] { "來自 C# 的標題" });
    }
}

// 橋接類別需標記 ComVisible
[System.Runtime.InteropServices.ComVisible(true)]
public class Bridge {
    private Form1 _form;
    public Bridge(Form1 form) { _form = form; }
    public void NotifyReady() { _form.ShowMessage("頁面載入完成"); }
}

<!-- 內嵌 HTML 範本 -->
<html>
<head><meta http-equiv="X-UA-Compatible" content="IE=Edge" /></head>
<body>
  <h1 id="title">360 風格標題</h1>
  <button onclick="window.external.NotifyReady()">通知 C#</button>
  <script>
    function updateTitle(text) { document.getElementById('title').innerText = text; }
    // 頁面載入後主動通知
    window.external.NotifyReady();
  </script>
</body></html>

關鍵技術細節

• 文件模式鎖定：<meta http-equiv="X-UA-Compatible" content="IE=Edge"> 強制使用最高版本 IE 內核渲染，否則預設 IE7 模式會導致 CSS3 失效。
• 腳本錯誤抑制：webBrowser1.ScriptErrorsSuppressed = true; 避免 JS 錯誤彈窗干擾。
• 記憶體洩漏防範：關閉表單前呼叫 webBrowser1.Dispose()，並解除事件訂閱。
• 高 DPI 適配：在 Manifest 中宣告 dpiAware，或使用 WebView2 獲得原生支援。

為什麼 360 早期選 WebBrowser？

1. Windows XP/7 時代系統預裝 IE，零部署成本。
2. 團隊擁有深厚 MFC/C++ 基因，COM 互操作輕車熟路。
3. 介面頻繁變動，HTML+JS 可熱更新，無需重新編譯發布客戶端。

現代化遷移建議

新專案優先採用 WebView2 (C#/C++) 或 CEF：

• WebView2：共用系統 Edge 內核，體積小、自動更新、支援現代 Web 標準，微軟長期維護。
• CEF：需自帶 Chromium 二進制，適合需離線、跨平台、深度定制內核行為的場景。

總結

360 系產品介面本質上是「原生殼 + Web 內核」的混合架構。早期借助 WebBrowser (IE) 快速構建華麗 UI，現代開發應轉向 WebView2 或 CEF 以獲得最佳相容性、效能與安全性。核心關鍵在於建立穩健的 JSBridge 讓前後端無縫協作。