Delphi Programming Observations

Friday, November 21, 2008

JQuery in a TWebBrowser, in a self contained Delphi app

I wanted to find a way to use JQuery from Delphi on a page in a TWebBrowser, without requiring downloading over the internet, nor from the filesystem.

Download the Delphi 2009 project.

It turns out you can just execute the whole contents of the JQuery javascript file.

To test out the Delphi project, you should press the “1. Load HTML” button, then the “2. Inject JQuery” button. Clicking the two links in the html should perform that action (don’t click them before injecting JQuery, it will cause errors). You can also use the buttons to call JavaScript from Delphi. You can also write your own JavaScript or JQuery into the combobox and press enter, and it will be executed.

The zip file contains a Delphi2009 project and source code, but it should not be too hard to convert it for Delphi 2006 or 2007. (Probably just something like changing the {$R *.dres} to {$R TWebBrowserJQueryTest2.res ‘TWebBrowserJQueryTest.rc’}, and removing some things like MainFormOnTaskBar for D2006). This is a demo program, and it certainly lacks polish and error handling.

The jquery javascript file is stored as a resource, then a TStringStream loads it, and finally the string is executed as JavaScript in the TWebBrowser.

procedure TForm1.btnInjectJQueryClick(Sender: TObject);
   ExecJS(RetrieveJQueryFromResource, false);

function TForm1.RetrieveJQueryFromResource: String;
   rs: TResourceStream;
   ss: TStringStream;
   rs := TResourceStream.Create(HInstance, 'JQUERY', RT_RCDATA);
      ss := TStringStream.Create;

         ss.Position := 0;
         Result := ss.DataString;
posted by Jason at 9:42 pm  

One Response to “JQuery in a TWebBrowser, in a self contained Delphi app”

  1. William says:

    Hi Jason:

    I found this piece of useful code while searching for Delphi and JQuery. Its nice to know someone has already done I what was going to do.

    I was wondering if you have also tried JQuery UI? I am trying attach JQuery and UI to a webbrowser, also the relevant stylesheet. But I having trouble getting images to show, in particular the progressbar, I tried many ways to get background-image url path right, but no result.

    If you have any suggestion let me know by email or here :)

    Thank you.