Delphi 使用 TWebBrowser 嵌入網頁做為程式介面：HTML/CSS/Flash 打造炫酷 UI

設計理念

利用 TWebBrowser (封裝 MSHTML/IE 引擎) 載入本地 HTML 檔案，透過超連結 href 觸發 OnBeforeNavigate2 事件，解析 URL 片段執行對應 Delphi 程式邏輯，實現「網頁做介面、Delphi 做邏輯」的混合開發模式。

實作步驟

1. 用 FrontPage/Dreamweaver/VS Code 設計介面 HTML，按鈕以 <a href="Action_Command"> 形式 (如 Play_、Stop_)。
2. 儲存為 WebFrm.htm 放置專案目錄。
3. Delphi 表單放 TWebBrowser，Align := alClient，FormCreate 載入檔案。
4. 編寫 OnBeforeNavigate2 攔截導航，解析 URL 判斷命令，設定 Cancel := True 防止頁面跳轉錯誤。

核心程式碼

procedure TForm1.FormCreate(Sender: TObject);
begin
  WebBrowser1.Navigate(ExtractFilePath(Application.ExeName) + 'WebFrm.htm');
end;

procedure TForm1.WebBrowser1BeforeNavigate2(Sender: TObject; const pDisp: IDispatch;
  var URL, Flags, TargetFrameName, PostData, Headers: OleVariant; var Cancel: WordBool);
begin
  // URL 範例: file:///D:/Project/WebFrm.htm#Play_
  if Pos('Play_', URL) > 0 then
  begin
    // 執行播放邏輯
    ShowMessage('播放'); // 替換為實際播放代碼
    Cancel := True;
  end
  else if Pos('Stop_', URL) > 0 then
  begin
    ShowMessage('停止');
    Cancel := True;
  end;
end;

進階技巧

• 雙向通訊：Delphi → 網頁：WebBrowser1.OleObject.Document.GetElementById('id').InnerText := '...' 或 execScript 呼叫 JS 函數。網頁 → Delphi：window.external 需實作 IDispatch (較複雜)，或維持 URL 片段導航模式。
• 本地資源：HTML 參考圖片/JS/CSS 使用相對路徑，確保部署時一併複製。
• Edge WebView2：現代替代方案，使用 Chromium 核心、支援 ES6/CSS3、效能更佳，Delphi 可透過 TEdgeBrowser (10.4+) 或 WebView2Loader 整合。

適用場景與限制

• 適用：儀表板、報表預覽、富文本編輯器、需要動態視覺效果的介面。
• 限制：IE 引擎老舊 (不支援現代 CSS/JS)、記憶體佔用大、部署需確保目標機有 IE/Edge WebView2 執行環境、安全性限制 (Active Scripting、跨網域)。