Notes on using the TWebBrowser component in Delphi 7

I began to use the TWebBrowser component to display the help topic in my programs. In this version, it’s quite simple – we put the usual html-files in a folder and, if necessary, call WebBrowser.Navigate(HelpDir + ‘index.html’);
html already contains everything that your heart desires, with pictures, cross-references and scripts available to InternetExplorer.

Everything became much more interesting when I wanted to display information from the database through it, and also programmatically make changes on the displayed page. As it turned out, this is all possible.

CSS insertion is resolved as standard on the web, for example by adding before the body:

<style type="text/css">
table {
  border-collapse: collapse; 
  border-color: #E0E0E0;
  font-size:x-small;
}
td {
  border: 1px solid;
  padding: 2px;
}
</style>

Display any HTML code that is passed to TWebBrowser. This is done like this:

var
  Doc: Variant;
begin
  if NOT Assigned(wBrowser.Document) then
    wBrowser.Navigate('about:blank');
  Doc := wBrowser.Document;
  Doc.Clear;
  Doc.Write('Hello World');
  Doc.Close;
end;

Rewind the page to the end immediately after downloading. This is solved by adding JavaScript to the end of the page (it is possible after the body):

<script>window.scrollTo(0,document.body.scrollHeight);</script>

Execute the JavaScript code:

var
  Doc: Variant;
begin
  if NOT Assigned(wBrowser.Document) then
    wBrowser.Navigate('about:blank');
  Doc := wBrowser.Document;
  Doc.parentWindow.execScript('alert("Hello World");', 'JavaScript');

Read attribute value like this:

function GetElementIdValue(WebBrowser: TWebBrowser; TagName, TagId, TagAttrib: string):string;
var
  Document: IHTMLDocument2;
  Body: IHTMLElement2;
  Tags: IHTMLElementCollection;
  Tag: IHTMLElement;
  I: Integer;
begin
  Result:='';
  if not Supports(WebBrowser.Document, IHTMLDocument2, Document) then
    raise Exception.Create('Invalid HTML document');
  if not Supports(Document.body, IHTMLElement2, Body) then
    raise Exception.Create('Can''t findelement');
  Tags := Body.getElementsByTagName(UpperCase(TagName));
  for I := 0 to Pred(Tags.length) do begin
    Tag:=Tags.item(I, EmptyParam) as IHTMLElement;
    if Tag.id=TagId then Result := Tag.getAttribute(TagAttrib, 0);
  end;
end;

// EXAMPLE OF USE OF THE FUNCTION:
Result := GetElementIdValue(WebBrowser1, 'input', 'result', 'value');

And at last the most interesting – how from a code javascript on page to transfer event or the information in code Delphi? To do this, you can click the link inside HTML and intercept this event in the OnBeforeNavigate2 handler, then parse the URL and extract the necessary information from this line. It’s natural not to forget “Cancel: = true;” if you do not need the browser to follow this link. It is better for this method of information transfer and events to provide a special prefix in the address, by the presence of which it is necessary to determine whether to proceed. Example handler:

procedure TMyForm.WebBrowserBeforeNavigate2(Sender: TObject; const pDisp: IDispatch; var URL, Flags, TargetFrameName, PostData, Headers: OleVariant; var Cancel: WordBool);
var
  pre: string;
  p: Integer;
begin
  p := pos(':', URL);
  if p > 0 then begin
    pre := Copy(URL, 1, p-1);
    if pre = 'event' then begin
      ShowMessage(Copy(URL, p+1, length(URL)-p));
      Cancel := TRUE;
    end;
  end;
end;

The code sending information here can be for example:

<input id="testButton" type="button" value="test" />