HTML的界面有以下特點：圖文混排，格式靈活，可以包含Flash、聲音和視頻等，實現圖文聲像的多媒體界面，而且易于建立和維護。另外，HTML的顯示環境一般機器上都具備，通常不需要安裝額外的軟件。當然，HTML界面也有它欠缺的方面，即：界面控制能力有限，代碼調試不便----雖然DHTML提供了比較強的編程特性，但是比起Delphi的傳統的開發語言和工具來，對界面的控制能力，尤其是和數據交互時的控制能力還是稍遜一籌。

了解了這些特點，我們就可以在實際應用開發中，適時地選擇HTML技術。下面舉個例子：

一種儀器的管理程序，需要顯示該儀器的操作方法文檔，包含文字和圖片，并要求可以隱藏或顯示文檔，并能安要求打印。

這個應用中，圖文顯示、隱藏/顯示部分文檔、圖文打印等需求，都是HTML界面所擅長的，用傳統的表單控件實現幾乎無法想像。

用Delphi實現HTML界面的應用主要有兩種選擇：WebBrowser Control或MSHTML。為了弄清兩者如何選擇，我們先來看看Internet Exporer 4.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 Sample Source Page。

(*注：In-place鏈接，是指點擊HTML連接時，在相同的WebBrowser實例中顯示連接的HTML文檔。如果僅使用MSHTML.DLL，點擊鏈接將導致在新的瀏覽器實例中打開鏈接的文檔。)

首先，在Delphi 7.0組件面板的Internet頁上，把TWebBrowser組件放到表單上。

通過執行以下語句裝載HTML文檔到WebBrowser中進行顯示：

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;

設置/取值代碼示例：

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。

知道了訪問HTML內容的方法，就可以通過間接方式調用HTML頁面上包含的JavaScript代碼。具體實現方式是：在HTML中插入等不可見元件，利用它的click事件調用響應的JavaScript函數，然后再Delphi中調用該元件的click過程。

下面我們就用Delphi調用JavaScript的alert函數來實現消息提示框。首先在HTML中加入：

Delphi中的調用代碼如下：

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 和 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，具體實現方法可以看看MSDN Library。

HTML事件的響應方式有兩種：一種是JavaScript，一種是在Delphi中響應。一些簡單的功能可以在JavaScript中實現，這樣易于修改。但是從功能、安全性等方面考慮，通常還是要在Delphi中實現。例如當用戶點擊HTML上的一個按鈕時，需要訪問數據庫，這是就得用Delphi了。

在Delphi中響應HTML事件，實際上就是響應ActiveX事件的問題，這通過事件槽(Event Sink)來實現，有些繁瑣。還好前人已經為我們作了很多工作。利用Experts Exchange網站的Cynna封裝的TDHTMLEvent類(該源碼請看本文的附件)，實現就簡單多了。實現代碼如下：

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過程。

含有多行文本輸入框(textarea )或提交(submit)按鈕的HTML表單在TWebBrowser中顯示時，對回車鍵不響應。另外，Delphi表單上按鈕的快捷字母鍵也無法在HTML表單上輸入，因為一輸入就觸發相應按鈕的單擊事件。解決代碼如下：

unitUnit1;

interface

usesWindows,?Messages,?SysUtils,?Variants,?Classes,?Graphics,?Controls,?Forms,

Dialogs,?OleCtrls,?SHDocVw_TLB,?ActiveX,?StdCtrls;

typeTForm1?=?class(TForm)

WebBrowser1:?TWebBrowser;

Button1:?TButton;

Button2:?TButton;

procedureFormDestroy(Sender:?TObject);

procedureFormCreate(Sender:?TObject);

procedureButton1Click(Sender:?TObject);

procedureButton2Click(Sender:?TObject);

private{?Private?declarations?}FOleInPlaceActiveObject:?IOleInPlaceActiveObject;

procedureMsgHandler(varMsg:?TMsg;?varHandled:?Boolean);

public{?Public?declarations?}end;

varForm1:?TForm1;

implementation{$R?*.dfm}procedureTForm1.FormDestroy(Sender:?TObject);

beginFOleInPlaceActiveObject?:=?nil;

end;

procedureTForm1.FormCreate(Sender:?TObject);

beginApplication.OnMessage?:=?MsgHandler;

end;

procedureTForm1.MsgHandler(varMsg:?TMsg;?varHandled:?Boolean);

constDialogKeys:?set?ofByte?=?[VK_LEFT,?VK_RIGHT,?VK_BACK,?VK_UP,?VK_DOWN,

$30..$39,?$41..42,?$44..$55,?$57,?$59..$5A];

variOIPAO:?IOleInPlaceActiveObject;

Dispatch:?IDispatch;

begin{?exit?if?we?don‘t?get?back?a?webbrowser?object?}if(WebBrowser1?=?nil)?then

beginHandled?:=?System.False;

Exit;

end;

Handled?:=?(IsDialogMessage(WebBrowser1.Handle,?Msg)?=?System.True);

if(Handled)?and(notWebBrowser1.Busy)?then

begin

ifFOleInPlaceActiveObject?=?nil?then

beginDispatch?:=?WebBrowser1.Application;

ifDispatch?<>?nil?then

beginDispatch.QueryInterface(IOleInPlaceActiveObject,?iOIPAO);

ifiOIPAO?<>?nil?thenFOleInPlaceActiveObject?:=?iOIPAO;

end;

end;

ifFOleInPlaceActiveObject?<>?nil?then

if((Msg.message=?WM_KEYDOWN)?or(Msg.message=?WM_KEYUP))?and(Msg.wParam?inDialogKeys)?then//?nothing?-?do?not?pass?on?the?DialogKeyselseFOleInPlaceActiveObject.TranslateAccelerator(Msg);

end;

end;

initializationOleInitialize(nil);

finalizationOleUninitialize;

本段代碼出自SwissDelphiCenter.ch，作者未知。主要要引用ActiveX。Delphi 7中SHDocVw_TLB改為SHDocVw。

HTML的打印和預覽向來是個難題，但自從IE5.5推出后，情況大有改觀。你可以利用其“打印模板”功能，實現自己的預覽窗口和控制打印。“打印模板”的使用方法請參考MSDN Library中的Web Development > Programming and Reusing the Browser > Print Templates目錄下的文章。從微軟的網站上還可以下載到一個不錯的例子，示例如何一步步由淺入深地使用Print Template (下載：打印模板示例)。

你會發現，要自己實現一個功能完善的打印模板也并非易事。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頁眉內容，并制定以英寸為單位的頁眉的高度和寬度，其中寬度應該和模版相符。例：

...(HTML頁眉內容)

第二步，聲明變量。在模版前面變量聲明部分加上兩個變量聲明：

var g_htmlHeader = "";//用于保存頁眉內容

var g_nHeaerHeight = 0;//頁眉的高度

第三步，取得頁眉。在函數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;

在函數EnsureDocuments()中，

/*注釋掉以下代碼

if (header)

{

tmp = upTop + (27 / 100);

if (tmp > top)

top = tmp;

}

if (footer)

{

tmp = upBottom + (27 / 100);

if (tmp > bottom)

bottom = tmp;

}

*/

//緊接著加上：

tmp = upTop + g_nHeaerHeight;

if (tmp > top)

top = tmp;

//下面隔幾行，注釋掉：oRule.style.top = upTop + "in";

第五步，指定頁眉內容。在函數CPrintDoc_AddPage()中，在“HeadFoot.page = HeadFoot.pageTotal;”語句之后加入：

//這兩行用于設置頁碼，你在頁眉可以通過加入“[P]”和“[p]”分別代表總頁數和當前頁數。

g_htmlHeader = g_htmlHeader.replace("[P]", "");

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頁眉的新模版就定制完成了。是不是覺得特爽？如果覺得它給你省下了兩周的時間，就趕緊到“希望之光”網站上，花你2天的工資，資助一個小孩上學吧。

定制好的打印模板怎么用呢？請看以下代碼：

var

vaIn, vaOut: OleVariant;

CmdTarget : IOleCommandTarget;

MyHandle : THandle;

begin

vaIn := ‘c:\\Preview.htm‘;

//預覽方法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不支持打印預覽的話就會出錯。第二種方法可能更好一些。

在打印預覽時，預覽窗口的尺寸大小總是和WebBrowser所在的Form的一樣，而且沒法最大化。更麻煩的是，如果你的表單是嵌入到了別的表單的組件上顯示的，例如，Form1.Parent := Form2.Panel1，即Form1顯示在Form2中Panel1所占據的位置，那么預覽窗口就變得很小了，不拉大根本沒法看。解決辦法如下，在預覽的代碼后面加上以下代碼，使預覽窗口最大化：

Handle:=FindWindow(‘Internet Explorer_TridentDlgFrame‘, ‘打印預覽‘);

if 0 <> MyHandle then

begin

ShowWindow(MyHandle , SW_MAXIMIZE);

end;

如果不預覽而是直接打印，則把OLECMDID_PRINTPREVIEW換成OLECMDID_PRINT就可以了。

如果要在Web應用中使用打印模板，可以通過ActiveX來實現調用。

注：打印模板需要安裝Internet Explorer 5.5以上版本，本文其它功能需要安裝Internet Explorer4.0以上版本。

應用做好了，總不能把HTML文件和相關的圖片文件等直接發布吧。這樣既不安全，前面禁止用戶查看源代碼的努力也白費了。因此至少應該將這些文件打個包。一般來說，作為資源編譯到exe或dll里就行了。我覺得編譯到DLL中最為方便。在Visual Studio中，新建一個Win32工程，應用類型選擇DLL。然后把HTML文件和相關的圖片文件等資源加到工程中，然后編譯即可。

再添加HTML等資源時，我強烈推薦用手工加入的方法。原因有二：一，GIF等圖片文件加入到工程中時，Studio可能會把文件內容自動改了，使得該文件不能正確顯示；二，加入資源后會自動生成資源ID，需要把它改成你需要的名稱(通常改成和文件名相同)，當文件很多時，這項工作就很浪費時間，也很煩人。手工加入，即用文本編輯器把資源腳本文件(工程名.rc)打開，手工加入內容。我就不贅述了，格式例子如下：

About.htm???? HTML???? "HTML\\About.htm"

image016.gif???? IMAGES???? "HTML\\images\\image016.gif"

當加入很多文件時，如何節省時間呢？沒有實踐經驗的人，是不可能想到這些問題的。別著急，按我說的做。

首先，進入命令行(DOS)界面(Windows NT/2000/XP/2003下運行cmd.exe進入)，進入你的HTML等資源文件所在的目錄，執行“dir > temp.txt”,把文件列表輸出到temp.txt。

接著，用文本編輯器把該文件打開，去掉頭尾內容，僅留文件列表部分，例如：

2004-03-17 11:20 20,397 About.htm

2004-03-17 11:20 27,397 index.htm

然后，用Excel把修改后的文件打開。打開時，“原始數據類型”請選擇“固定寬度 - 每列字段加空格對齊”。這樣，日期、時間、文件大小、文件名就被分別放在了不同的列中。刪除前三列，僅留文件名一列，并把該列復制一份。在兩個文件名列之間插入兩個空列，分別填寫“HTML”和“"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等)，因為數字是被用來標識某種資源或某個資源的，如果用僅用數字作文件名(可以用字母+數字)，打包后會導致訪問找不到文件。

總結

以上是生活随笔為你收集整理的html页面调用存储过程,用WebBrowser实现HTML界面的应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。