Delphi實現HTMLWebBrowser實現HTML界面
HTML的界面有以下特點：圖文混排，格式靈活，可以包含Flash、聲音和視頻等，實現圖文聲像的多媒體界面，而且易于建立和維護。另外，HTML的顯示環境一般機器上都具備，通常不需要安裝額外的軟件。當然，HTML界面也有它欠缺的方面，即：界面控制能力有限，代碼調試不便----雖然DHTML提供了比較強的編程特性，但是比起Delphi的傳統的開發語言和工具來，對界面的控制能力，尤其是和數據交互時的控制能力還是稍遜一籌。
了解了這些特點，我們就可以在實際應用開發中，適時地選擇HTML技術。下面舉個例子：
一種儀器的管理程序，需要顯示該儀器的操作方法文檔，包含文字和圖片，并要求可以隱藏或顯示文檔，并能安要求打印。
這個應用中，圖文顯示、隱藏/顯示部分文檔、圖文打印等需求，都是HTML界面所擅長的，用傳統的表單控件實現幾乎無法想像。
用什么實現HTML的界面
用Delphi實現HTML界面的應用主要有兩種選擇：WebBrowser Control或MSHTML。為了弄清兩者如何選擇，我們先來看看Internet Exporer 4.0及其后續版本的體系結構：
http://msdn.microsoft.com/workshop/graphics/IE4Arch.gif" width=305 border=0>
IE瀏覽器是建立在SHDOCVW.DLL組件之上的，而SHDOCVW.DLL則建立在MSHTML.DLL組件之上，底層則包括腳本引擎等。SHDOCVW.DLL提供了對活動文檔(Active Document)的支持----例如Word等文檔可以在IE中顯示，并提供導航、in-place*連接、收藏夾、瀏覽歷史和分級內容選擇(PICS: Platform for Internet Content Selection)等功能。SHDOCVW.DLL組件雖然也提供了很多接口可以單獨使用，但是通常所指的SHDOCVW.DLL就是WebBrowser Control。MSHTML.DLL是實行HTML解析和表現的組件。它通過DHTML對象模型提供對HTML文檔的訪問。它實現了活動文檔服務器接口，可以通過COM接口調用。
不難看出，WebBrowser在比較高的層次上，提供了更為豐富的功能，因此一般通常編程都采用WebBrower控件。MSHTML只有在需要解析HTML這樣的特殊應用中，才推薦使用。微軟的MSDN網站上提供了一個使用MSHTML的例子：WalkAll'>http://msdn.microsoft.com/downloads/samples/internet/browser/walkall/default.asp">WalkAll Sample Source Page。
（*注：In-place鏈接，是指點擊HTML連接時，在相同的WebBrowser實例中顯示連接的HTML文檔。如果僅使用MSHTML.DLL，點擊鏈接將導致在新的瀏覽器實例中打開鏈接的文檔。）
如何訪問HTML頁面的內容
首先，在Delphi 7.0組件面板的Internet頁上，把TWebBrowser組件放到表單上。
通過執行以下語句裝載HTML文檔到WebBrowser中進行顯示：
WebBrowser1.Navigate(GetCurrentDir + '\index.htm');
隱藏/顯示HTML元件代碼示例：
Pascal Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | procedure xx(); var Doc : IHTMLDocument2; element: IHTMLElement; begin Doc := IHTMLDocument2(WebBrowser1.Document); if nil <> Doc then begin element := Doc.all.item('T1', 0) as IHTMLElement; if nil <> element then begin if '' = element.style.display then begin element.style.display := 'none' else element.style.display := ''; end; end; end; |
設置/取值代碼示例：
var
Doc : IHTMLDocument2;
inputText : IHTMLInputTextElement;
begin
Doc := IHTMLDocument2(WebBrowser1.Document);
if nil <> Doc then
begin
//如果T1不是IHTMLInputTextElement類型將出錯
inputText := Doc.all.item('T1', 0) as IHTMLInputTextElement;
inputText.value := Edit1.Text;
Edit2.Text := inputText.value;
end;
end;
提示：關于哪些HTML元件（標記）應該采用什么MSHTML接口進行訪問，請參考MSDN Library中的Web Development > Programming and Reusing the Browser > MSHTML Reference > Interfaces and Scripting Objects。
如何調用JavaScript函數（兼談消息提示框）
知道了訪問HTML內容的方法，就可以通過間接方式調用HTML頁面上包含的JavaScript代碼。具體實現方式是：在HTML中插入<span></span>等不可見元件，利用它的click事件調用響應的JavaScript函數，然后再Delphi中調用該元件的click過程。
下面我們就用Delphi調用JavaScript的alert函數來實現消息提示框。首先在HTML中加入：
<span ></span>
Delphi中的調用代碼如下：
Pascal Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | procedure TForm1.Alert(const Msg : string); var Doc : IHTMLDocument2; Element : IHTMLElement; begin Doc := IHTMLDocument2(WebBrowser1.Document); Assert(nil <> Doc);//一定要先加載HTML Element := Doc.all.item('ShowMessage', 0) as IHTMLElement; if nil <> Element then begin Element.innerText := Msg; Element.click; end; end; |
我發現在Delphi中用Browser顯示HTML，如果你的表單是作為EXE運行，然后嵌入到了別的表單的組件上顯示的，例如，Form1.Parent := Form2.Panel1，即Form1顯示在Form2中Panel1所占據的位置，當你用ShowMessage顯示提示信息時，HTML的內容依然可以被操作，這顯然不太好。使用JavaScript中的alert函數則可避免這種現象。
如何禁止右鍵菜單（如何禁止用戶查看源代碼）
默認情況下，在顯示HTML的WebBrowser上點擊鼠標右鍵，會顯示一個彈出菜單，和IE中看到的一樣。通過這個菜單用戶可以查看HTML的源代碼。因此有時候我們需要屏蔽該菜單。和該菜單相關的接口是IEDocHostUIHandler。已經用人對它進行了封裝，詳見ieConst.pas'>http://members.shaw.ca/iedelphi/downloads/source/ieConst.pas">ieConst.pas 和 IEDocHostUIHandler.pas'>http://members.shaw.ca/iedelphi/downloads/source/IEDocHostUIHandler.pas">IEDocHostUIHandler.pas。使用方法如下：
Pascal Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | var Form1: TForm1; FDocHostUIHandler: TDocHostUIHandler; ... implementation ... procedure TForm1.FormCreate(Sender: TObject); begin FDocHostUIHandler := TDocHostUIHandler.Create; end; procedure TForm1.FormClose(Sender: TObject; var Action: TCloseAction); begin FDocHostUIHandler.Free; end; procedure TForm1.WebBrowser1NavigateComplete2(Sender: TObject; pDisp: IDispatch; var URL: OleVariant); var hr: HResult; CustDoc: ICustomDoc; begin hr := WebBrowser1.Document.QueryInterface(ICustomDoc, CustDoc); if hr = S_OK then CustDoc.SetUIHandler(FDocHostUIHandler); end; |
有時你可能還需要定制自己的右鍵菜單，這是還是要借助于IEDocHostUIHandler，具體實現方法可以看看MSDN Library。
如何響應HTML的事件（如何在HTML中調用Delphi的代碼）
HTML事件的響應方式有兩種：一種是JavaScript，一種是在Delphi中響應。一些簡單的功能可以在JavaScript中實現，這樣易于修改。但是從功能、安全性等方面考慮，通常還是要在Delphi中實現。例如當用戶點擊HTML上的一個按鈕時，需要訪問數據庫，這是就得用Delphi了。
在Delphi中響應HTML事件，實際上就是響應ActiveX事件的問題，這通過事件槽(Event Sink)來實現，有些繁瑣。還好前人已經為我們作了很多工作。利用Experts Exchange網站的Cynna封裝的TDHTMLEvent類（該源碼請看本文的附件），實現就簡單多了。實現代碼如下：
Pascal Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | var Form1: TForm1; EventSink: TDHTMLEvent; ... implementation ... procedure TForm1.FormCreate(Sender: TObject); begin EventSink:= TDHTMLEvent.Create; end; procedure TForm1.FormClose(Sender: TObject; var Action: TCloseAction); begin EventSink.Free; end; procedure TForm1.DemoEventSink(Sender: TObject); begin ShowMessage('成功從HTML中調用Delphi的過程。'); end; procedure TForm1.WebBrowser1DocumentComplete(Sender: TObject; const pDisp: IDispatch; var URL: OleVariant); var Doc : IHTMLDocument2; Element : IHTMLElement; begin Doc := IHTMLDocument2(WebBrowser1.Document); if nil <> Doc then begin //找到HTML元件 Element := Doc.all.item('B3', 0) as IHTMLElement; //使HTML元件的click事件和DemoEventSink過程關連 Element.onclick := EventSink.HookEventHandler(DemoEventSink); end; end; |
點擊HTML頁面中ID為'B3'的按鈕，就會調用DemoEventSink過程。
如何能在HTML控件上輸入回車
含有多行文本輸入框(textarea )或提交(submit)按鈕的HTML表單在TWebBrowser中顯示時，對回車鍵不響應。另外，Delphi表單上按鈕的快捷字母鍵也無法在HTML表單上輸入，因為一輸入就觸發相應按鈕的單擊事件。解決代碼如下：
Pascal Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, Dialogs, OleCtrls, SHDocVw_TLB, ActiveX, StdCtrls; type TForm1 = class(TForm) WebBrowser1: TWebBrowser; Button1: TButton; Button2: TButton; procedure FormDestroy(Sender: TObject); procedure FormCreate(Sender: TObject); procedure Button1Click(Sender: TObject); procedure Button2Click(Sender: TObject); private { Private declarations } FOleInPlaceActiveObject: IOleInPlaceActiveObject; procedure MsgHandler(var Msg: TMsg; var Handled: Boolean); public { Public declarations } end; var Form1: TForm1; implementation {$R *.dfm} procedure TForm1.FormDestroy(Sender: TObject); begin FOleInPlaceActiveObject := nil; end; procedure TForm1.FormCreate(Sender: TObject); begin Application.OnMessage := MsgHandler; end; procedure TForm1.MsgHandler(var Msg: TMsg; var Handled: Boolean); const DialogKeys: set of Byte = [VK_LEFT, VK_RIGHT, VK_BACK, VK_UP, VK_DOWN, $30..$39, $41..42, $44..$55, $57, $59..$5A]; var iOIPAO: IOleInPlaceActiveObject; Dispatch: IDispatch; begin { exit if we don't get back a webbrowser object } if (WebBrowser1 = nil) then begin Handled := System.False; Exit; end; Handled := (IsDialogMessage(WebBrowser1.Handle, Msg) = System.True); if (Handled) and (not WebBrowser1.Busy) then begin if FOleInPlaceActiveObject = nil then begin Dispatch := WebBrowser1.Application; if Dispatch <> nil then begin Dispatch.QueryInterface(IOleInPlaceActiveObject, iOIPAO); if iOIPAO <> nil then FOleInPlaceActiveObject := iOIPAO; end; end; if FOleInPlaceActiveObject <> nil then if ((Msg.message = WM_KEYDOWN) or (Msg.message = WM_KEYUP)) and (Msg.wParam in DialogKeys) then // nothing - do not pass on the DialogKeys else FOleInPlaceActiveObject.TranslateAccelerator(Msg); end; end; initialization OleInitialize(nil); finalization OleUninitialize;
|
本段代碼出自SwissDelphiCenter.ch，作者未知。主要要引用ActiveX。Delphi 7中SHDocVw_TLB改為SHDocVw。
如何實現HTML的打印和預覽
HTML的打印和預覽向來是個難題，但自從IE5.5推出后，情況大有改觀。你可以利用其“打印模板”功能，實現自己的預覽窗口和控制打印。“打印模板”的使用方法請參考MSDN Library中的Web Development > Programming and Reusing the Browser > Print Templates目錄下的文章。從微軟的網站上還可以下載到一個不錯的例子，示例如何一步步由淺入深地使用Print Template (下載：http://download.microsoft.com/download/6/8/3/683DB9FE-8D61-4A3C-B7B8-3169FF70AE9F/printtemplates.exe">打印模板示例)。
你會發現，要自己實現一個功能完善的打印模板也并非易事。IE瀏覽器本身帶的打印模板做得還不錯，能否在它的基礎上加上自己的定制功能呢？答案是肯定的，至少從技術上看是這樣（不考慮版權問題）。下面就介紹這偷懶的招。
用Visual Studio打開x:\Program Files\Internet Explorer\MUI\0804\SHDOCLC.DLL，會看到其資源目錄。其中HTML/PREVIEW.DLG就是IE所帶的打印模板了。把它export(導出)出來，把文件擴展名改成HTM，打開看看，是不是特刺激？PREVIEW.DLG用到了幾個圖片文件，在2110目錄下，別忘了導出。（注：我的環境是Windows XP Professional英文版+SP1a，IE是6.0sp1。）
IE默認的模版中，頁眉頁腳均只支持純文字。下面以定制HTML頁眉為例，看看如何定制自己的打印模板。思路是：用自己的頁眉內容換掉原有的內容，并修改其頁眉高度和頁邊距使之和新的頁眉相對應。
第一步，定義頁眉。在要使用此模版預覽打印的HTML文件中加入一個id為Header的div標記，括起HTML頁眉內容，并制定以英寸為單位的頁眉的高度和寬度，其中寬度應該和模版相符。例：
<div HTML\\”，然后就可以另存成以制表符分隔的文本文件了。
最后，用文本編輯器把上一步處理好的文件打開，不用我多說，只要幾個替換，就得到所需要的資源腳本了。對于不同目錄下的文件，均需要這么弄以下。
資源腳本弄好了，把資源文件也加入（不是作為資源加入）工程，編譯，就得到打包好的DLL文件了。接下來的問題是，這個DLL怎么用啊？別急，WebBrowser支持一種叫res的協議，可以訪問文件里的資源。例如，假設上面About.htm打包到了myresource.dll文件中，則可以通過res://myresource.dll/About.htm訪問，image016.gif則可通過res://myresource.dll/images/image016.gif訪問（注意到了吧，HTML在根目錄下，而IMAGES等其它資源則在同名目錄下）。如果About.htm中通過“images/image016.gif”引用了image016.gif文件，則該圖片在WebBrowser中正常顯示。換句話說，你在打包之前，程序可以通過file://...訪問HTML，打包之后，只需要換成res://...就可以了----打包對程序和HTML幾乎沒什么影響。但是，切記，切記！千萬不要僅以數字來做文件名（如：1.htm、2.gif等），因為數字是被用來標識某種資源或某個資源的，如果用僅用數字作文件名（可以用字母+數字），打包后會導致訪問找不到文件。
參考：http://m.blog.csdn.net/blog/fghydx/18548257