Delphi實現(xiàn)HTMLWebBrowser實現(xiàn)HTML界面
HTML的界面有以下特點：圖文混排,，格式靈活,，可以包含F(xiàn)lash、聲音和視頻等,，實現(xiàn)圖文聲像的多媒體界面,，而且易于建立和維護(hù)。另外,，HTML的顯示環(huán)境一般機(jī)器上都具備,，通常不需要安裝額外的軟件。當(dāng)然,，HTML界面也有它欠缺的方面,，即：界面控制能力有限，代碼調(diào)試不便----雖然DHTML提供了比較強(qiáng)的編程特性,，但是比起Delphi的傳統(tǒng)的開發(fā)語言和工具來,，對界面的控制能力，尤其是和數(shù)據(jù)交互時的控制能力還是稍遜一籌,。
了解了這些特點,，我們就可以在實際應(yīng)用開發(fā)中，適時地選擇HTML技術(shù)。下面舉個例子：
一種儀器的管理程序,，需要顯示該儀器的操作方法文檔,，包含文字和圖片，并要求可以隱藏或顯示文檔,，并能安要求打印,。
這個應(yīng)用中，圖文顯示,、隱藏/顯示部分文檔,、圖文打印等需求，都是HTML界面所擅長的,，用傳統(tǒng)的表單控件實現(xiàn)幾乎無法想像,。
　
用什么實現(xiàn)HTML的界面
用Delphi實現(xiàn)HTML界面的應(yīng)用主要有兩種選擇：WebBrowser Control或MSHTML。為了弄清兩者如何選擇,，我們先來看看Internet Exporer 4.0及其后續(xù)版本的體系結(jié)構(gòu)：
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中顯示,，并提供導(dǎo)航、in-place*連接、收藏夾、瀏覽歷史和分級內(nèi)容選擇(PICS: Platform for Internet Content Selection)等功能,。SHDOCVW.DLL組件雖然也提供了很多接口可以單獨使用,，但是通常所指的SHDOCVW.DLL就是WebBrowser Control,。MSHTML.DLL是實行HTML解析和表現(xiàn)的組件,。它通過DHTML對象模型提供對HTML文檔的訪問。它實現(xiàn)了活動文檔服務(wù)器接口,，可以通過COM接口調(diào)用,。
不難看出，WebBrowser在比較高的層次上,，提供了更為豐富的功能,，因此一般通常編程都采用WebBrower控件,。MSHTML只有在需要解析HTML這樣的特殊應(yīng)用中,，才推薦使用,。微軟的MSDN網(wǎng)站上提供了一個使用MSHTML的例子：WalkAll'>http://msdn.microsoft.com/downloads/samples/internet/browser/walkall/default.asp">WalkAll Sample Source Page,。
（*注：In-place鏈接，是指點擊HTML連接時,，在相同的WebBrowser實例中顯示連接的HTML文檔,。如果僅使用MSHTML.DLL，點擊鏈接將導(dǎo)致在新的瀏覽器實例中打開鏈接的文檔,。）
　
如何訪問HTML頁面的內(nèi)容
首先,，在Delphi 7.0組件面板的Internet頁上,，把TWebBrowser組件放到表單上。
通過執(zhí)行以下語句裝載HTML文檔到WebBrowser中進(jìn)行顯示：
WebBrowser1.Navigate(GetCurrentDir + '\index.htm');
隱藏/顯示HTML元件代碼示例：
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
                     element.style.display := 'none'
                 else
                     element.style.display := '';
             end;
         end;
     end;
設(shè)置/取值代碼示例：
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;
提示：關(guān)于哪些HTML元件（標(biāo)記）應(yīng)該采用什么MSHTML接口進(jìn)行訪問,，請參考MSDN Library中的Web Development > Programming and Reusing the Browser > MSHTML Reference > Interfaces and Scripting Objects,。
　
如何調(diào)用JavaScript函數(shù)（兼談消息提示框）
知道了訪問HTML內(nèi)容的方法，就可以通過間接方式調(diào)用HTML頁面上包含的JavaScript代碼,。具體實現(xiàn)方式是：在HTML中插入<span></span>等不可見元件,，利用它的click事件調(diào)用響應(yīng)的JavaScript函數(shù),，然后再Delphi中調(diào)用該元件的click過程。
下面我們就用Delphi調(diào)用JavaScript的alert函數(shù)來實現(xiàn)消息提示框,。首先在HTML中加入：
<span id="ShowMessage" style="display:none" onclick="alert(this.innerText);"></span>
Delphi中的調(diào)用代碼如下：
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;
我發(fā)現(xiàn)在Delphi中用Browser顯示HTML，如果你的表單是作為EXE運行,，然后嵌入到了別的表單的組件上顯示的,，例如，F(xiàn)orm1.Parent := Form2.Panel1,，即Form1顯示在Form2中Panel1所占據(jù)的位置，當(dāng)你用ShowMessage顯示提示信息時,，HTML的內(nèi)容依然可以被操作,，這顯然不太好,。使用JavaScript中的alert函數(shù)則可避免這種現(xiàn)象,。
　
如何禁止右鍵菜單（如何禁止用戶查看源代碼）
默認(rèn)情況下，在顯示HTML的WebBrowser上點擊鼠標(biāo)右鍵,，會顯示一個彈出菜單,，和IE中看到的一樣,。通過這個菜單用戶可以查看HTML的源代碼。因此有時候我們需要屏蔽該菜單,。和該菜單相關(guān)的接口是IEDocHostUIHandler,。已經(jīng)用人對它進(jìn)行了封裝，詳見ieConst.pas'>http://members./iedelphi/downloads/source/ieConst.pas">ieConst.pas 和 IEDocHostUIHandler.pas'>http://members./iedelphi/downloads/source/IEDocHostUIHandler.pas">IEDocHostUIHandler.pas,。使用方法如下：
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，具體實現(xiàn)方法可以看看MSDN Library。
　
如何響應(yīng)HTML的事件（如何在HTML中調(diào)用Delphi的代碼）
HTML事件的響應(yīng)方式有兩種：一種是JavaScript,，一種是在Delphi中響應(yīng),。一些簡單的功能可以在JavaScript中實現(xiàn)，這樣易于修改,。但是從功能,、安全性等方面考慮，通常還是要在Delphi中實現(xiàn),。例如當(dāng)用戶點擊HTML上的一個按鈕時,，需要訪問數(shù)據(jù)庫，這是就得用Delphi了,。
在Delphi中響應(yīng)HTML事件,，實際上就是響應(yīng)ActiveX事件的問題，這通過事件槽(Event Sink)來實現(xiàn),，有些繁瑣,。還好前人已經(jīng)為我們作了很多工作。利用Experts Exchange網(wǎng)站的Cynna封裝的TDHTMLEvent類（該源碼請看本文的附件）,，實現(xiàn)就簡單多了,。實現(xiàn)代碼如下：
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中調(diào)用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過程關(guān)連
             Element.onclick := EventSink.HookEventHandler(DemoEventSink);
         end;
     end;
點擊HTML頁面中ID為'B3'的按鈕,，就會調(diào)用DemoEventSink過程,。
　
如何能在HTML控件上輸入回車
含有多行文本輸入框(textarea )或提交(submit)按鈕的HTML表單在TWebBrowser中顯示時，對回車鍵不響應(yīng),。另外,，Delphi表單上按鈕的快捷字母鍵也無法在HTML表單上輸入，因為一輸入就觸發(fā)相應(yīng)按鈕的單擊事件,。解決代碼如下：

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。
　
如何實現(xiàn)HTML的打印和預(yù)覽
HTML的打印和預(yù)覽向來是個難題,，但自從IE5.5推出后,，情況大有改觀。你可以利用其“打印模板”功能,，實現(xiàn)自己的預(yù)覽窗口和控制打印,?！按蛴∧０濉钡氖褂梅椒ㄕ垍⒖糓SDN Library中的Web Development > Programming and Reusing the Browser > Print Templates目錄下的文章。從微軟的網(wǎng)站上還可以下載到一個不錯的例子，示例如何一步步由淺入深地使用Print Template (下載：http://download.microsoft.com/download/6/8/3/683DB9FE-8D61-4A3C-B7B8-3169FF70AE9F/printtemplates.exe">打印模板示例),。
你會發(fā)現(xiàn),，要自己實現(xiàn)一個功能完善的打印模板也并非易事。IE瀏覽器本身帶的打印模板做得還不錯,，能否在它的基礎(chǔ)上加上自己的定制功能呢,？答案是肯定的，至少從技術(shù)上看是這樣（不考慮版權(quán)問題）,。下面就介紹這偷懶的招,。
用Visual Studio打開x:\Program Files\Internet Explorer\MUI\0804\SHDOCLC.DLL，會看到其資源目錄,。其中HTML/PREVIEW.DLG就是IE所帶的打印模板了,。把它export(導(dǎo)出)出來，把文件擴(kuò)展名改成HTM,，打開看看,，是不是特刺激？PREVIEW.DLG用到了幾個圖片文件,，在2110目錄下,，別忘了導(dǎo)出。（注：我的環(huán)境是Windows XP Professional英文版+SP1a,，IE是6.0sp1,。）
IE默認(rèn)的模版中，頁眉頁腳均只支持純文字,。下面以定制HTML頁眉為例,，看看如何定制自己的打印模板。思路是：用自己的頁眉內(nèi)容換掉原有的內(nèi)容,，并修改其頁眉高度和頁邊距使之和新的頁眉相對應(yīng),。
第一步，定義頁眉,。在要使用此模版預(yù)覽打印的HTML文件中加入一個id為Header的div標(biāo)記,，括起HTML頁眉內(nèi)容，并制定以英寸為單位的頁眉的高度和寬度,，其中寬度應(yīng)該和模版相符,。例：
<div id="Header" style="DISPLAY:none; WIDTH:6.5in; HEIGHT:0.78in">
         ...（HTML頁眉內(nèi)容）
     </div>
第二步，聲明變量,。在模版前面變量聲明部分加上兩個變量聲明：
             var g_htmlHeader = "";//用于保存頁眉內(nèi)容
             var g_nHeaerHeight = 0;//頁眉的高度
第三步,，取得頁眉,。在函數(shù)OnLoadBody()中的“Printer.footer = dialogArguments.__IE_FooterString”語句之后加入這段代碼：

oPageHeader = dialogArguments.__IE_BrowseDocument.all.item("Header", 0);
if (null != oPageHeader)
{
     g_htmlHeader = oPageHeader.innerHTML;
     g_nHeaerHeight = oPageHeader.style.posHeight;
}

第四步，指定頁邊距和頁眉高度,。在上面的代碼下面緊接著加入：

//指定頁邊距,。其中40可以自己改，單位是百分之一英寸,。
Printer.marginTop = 40 + (g_nHeaerHeight * 100);
Printer.marginBottom = 40;
Printer.marginLeft = 40;
Printer.marginRight = 40;
在函數(shù)EnsureDocuments()中,，

//緊接著加上：
tmp = upTop + g_nHeaerHeight;
if (tmp > top)
top = tmp;
//下面隔幾行，注釋掉：oRule.style.top = upTop + "in";
第五步,，指定頁眉內(nèi)容,。在函數(shù)CPrintDoc_AddPage()中，在“HeadFoot.page = HeadFoot.pageTotal;”語句之后加入：
//這兩行用于設(shè)置頁碼,，你在頁眉可以通過加入“[P]”和“[p]”分別代表總頁數(shù)和當(dāng)前頁數(shù)。
g_htmlHeader = g_htmlHeader.replace("[P]", "<span class='hfPageTotal'></span>");
var pageHeader = g_htmlHeader.replace("[p]", HeadFoot.pageTotal);
//下面隔3行,，注釋掉：
//~oPage.children("header").innerHTML = HeadFoot.HtmlHead;
//~oPage.children("footer").innerHTML = HeadFoot.HtmlFoot;
//下面隔幾行,，把“newHTM += HeadFoot.HtmlHead;”改為：
newHTM += pageHeader ;
//然后注釋掉（不要頁腳）：newHTM += HeadFoot.HtmlFoot;
至此,，一個支持自定義HTML頁眉的新模版就定制完成了,。是不是覺得特爽,？如果覺得它給你省下了兩周的時間，就趕緊到“希望之光”網(wǎng)站上,，花你2天的工資,，資助一個小孩上學(xué)吧。
定制好的打印模板怎么用呢,？請看以下代碼：

var
     vaIn, vaOut: OleVariant;
     CmdTarget : IOleCommandTarget;
     MyHandle : THandle;
begin
     vaIn := 'c:\\Preview.htm';

     //預(yù)覽方法1：WebBrowser1.ControlInterface.ExecWB(OLECMDID_PRINTPREVIEW, OLECMDEXECOPT_PROMPTUSER, vaIn, vaOut);
//下面是方法2：
     if WebBrowser1.Document <> nil then
     begin
         WebBrowser1.Document.QueryInterface(IOleCommandTarget, CmdTarget);
         if CmdTarget <> nil then
         begin
             try
                 CmdTarget.Exec( PGuid(nil), OLECMDID_PRINTPREVIEW, OLECMDEXECOPT_PROMPTUSER, vaIn, vaOut);
             finally
                 CmdTarget._Release;
             end;
         end
         else
         begin
             ShowMessage('IE不支持該功能,，請升級至IE5.5以上。');
         end;
     end;
end;
方法1簡潔,，但是如果WebBroswer不支持打印預(yù)覽的話就會出錯,。第二種方法可能更好一些。
在打印預(yù)覽時,，預(yù)覽窗口的尺寸大小總是和WebBrowser所在的Form的一樣,，而且沒法最大化。更麻煩的是,，如果你的表單是嵌入到了別的表單的組件上顯示的,，例如,，F(xiàn)orm1.Parent := Form2.Panel1,，即Form1顯示在Form2中Panel1所占據(jù)的位置，那么預(yù)覽窗口就變得很小了，不拉大根本沒法看,。解決辦法如下,，在預(yù)覽的代碼后面加上以下代碼，使預(yù)覽窗口最大化：
             Handle:=FindWindow('Internet Explorer_TridentDlgFrame', '打印預(yù)覽');
                 if 0 <> MyHandle then
                 begin
                     ShowWindow(MyHandle , SW_MAXIMIZE);
                 end;
如果不預(yù)覽而是直接打印,，則把OLECMDID_PRINTPREVIEW換成OLECMDID_PRINT就可以了,。
如果要在Web應(yīng)用中使用打印模板，可以通過ActiveX來實現(xiàn)調(diào)用,。
注：打印模板需要安裝Internet Explorer 5.5以上版本,，本文其它功能需要安裝Internet Explorer4.0以上版本。
　
如何打包HTML和相關(guān)文件
應(yīng)用做好了,，總不能把HTML文件和相關(guān)的圖片文件等直接發(fā)布吧,。這樣既不安全，前面禁止用戶查看源代碼的努力也白費了,。因此至少應(yīng)該將這些文件打個包,。一般來說，作為資源編譯到exe或dll里就行了,。我覺得編譯到DLL中最為方便,。在Visual Studio中，新建一個Win32工程,，應(yīng)用類型選擇DLL,。然后把HTML文件和相關(guān)的圖片文件等資源加到工程中，然后編譯即可,。
再添加HTML等資源時,，我強(qiáng)烈推薦用手工加入的方法。原因有二：一,，GIF等圖片文件加入到工程中時,，Studio可能會把文件內(nèi)容自動改了，使得該文件不能正確顯示,；二,，加入資源后會自動生成資源ID，需要把它改成你需要的名稱（通常改成和文件名相同）,，當(dāng)文件很多時,，這項工作就很浪費時間，也很煩人,。手工加入,，即用文本編輯器把資源腳本文件（工程名.rc)打開，手工加入內(nèi)容,。我就不贅述了,，格式例子如下：
About.htm     HTML     "HTML\\About.htm"
image016.gif     IMAGES     "HTML\\images\\image016.gif"
當(dāng)加入很多文件時,，如何節(jié)省時間呢？沒有實踐經(jīng)驗的人,，是不可能想到這些問題的,。別著急，按我說的做,。
首先,，進(jìn)入命令行(DOS)界面（Windows NT/2000/XP/2003下運行cmd.exe進(jìn)入），進(jìn)入你的HTML等資源文件所在的目錄,，執(zhí)行“dir > temp.txt”,把文件列表輸出到temp.txt,。
接著，用文本編輯器把該文件打開,，去掉頭尾內(nèi)容,，僅留文件列表部分，例如：
2004-03-17 11:20 20,397 About.htm
2004-03-17 11:20 27,397 index.htm
然后,，用Excel把修改后的文件打開,。打開時，“原始數(shù)據(jù)類型”請選擇“固定寬度 - 每列字段加空格對齊”,。這樣,，日期、時間,、文件大小,、文件名就被分別放在了不同的列中。刪除前三列,，僅留文件名一列,，并把該列復(fù)制一份。在兩個文件名列之間插入兩個空列,，分別填寫“HTML”和“"HTML\\”,，然后就可以另存成以制表符分隔的文本文件了。
最后,，用文本編輯器把上一步處理好的文件打開,，不用我多說，只要幾個替換,，就得到所需要的資源腳本了,。對于不同目錄下的文件，均需要這么弄以下,。
資源腳本弄好了,，把資源文件也加入（不是作為資源加入）工程，編譯,，就得到打包好的DLL文件了,。接下來的問題是,，這個DLL怎么用啊,？別急，WebBrowser支持一種叫res的協(xié)議,，可以訪問文件里的資源,。例如，假設(shè)上面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幾乎沒什么影響。但是,，切記,，切記！千萬不要僅以數(shù)字來做文件名（如：1.htm,、2.gif等）,，因為數(shù)字是被用來標(biāo)識某種資源或某個資源的，如果用僅用數(shù)字作文件名（可以用字母+數(shù)字）,，打包后會導(dǎo)致訪問找不到文件,。