With the release of 10.4.2 Sydney, the TEdgeBrowser for Delphi, C++Builder, and RAD Studio now works with the released version of Microsoft Edge and the Microsoft Edge WebView2 Runtime. This VCL component offers a number of improvements over the existing TWebBrowser, and the one I want to show you now is how to render arbitrary HTML, run arbitrary JavaScript, and grab the HTML Source from a web page.
First off all, to install TEdgeBrowser there are three steps:
- Install the EdgeView2 SDK from GetIt.
- Through the GetIt Window in the IDE
- or via GetItCmd and the RAD Studio Command Prompt (You can also use AutoGetIt)
getitcmd -ae -i=EdgeView2SDK-1.0.664.37
- Download and install the Microsoft EdgeView2 Runtime appropriate for your architecture
- It comes in 3 varieties
- Evergreen Bootstraper – Downloads and installs the latest version of the runtime matching the current architecture. Use this to install with your application.
- Evergreen Standalone Installer – Offline installer for Win32 or Win64
- Fixed Version – Allows you to download and install previous versions instead of the latest one offered by the Evergreen installers.
- If you are building a Win32 application, then install the x86 version. If you are building a Win64 application, then install the x64 version. Or install both!
- It comes in 3 varieties
- At runtime your program needs to access to WebView2Loader.dll, the easiest way to do this is either place it on the path, or use a Post Build event
- For Win32: copy /y “$(BDS)Redistwin32WebView2Loader.dll” “$(OUTPUTDIR)”
- For Win64: copy /y “$(BDS)Redistwin64WebView2Loader.dll” “$(OUTPUTDIR)”
When deploying your application you need to include the correct WebView2Loader.dll and make sure the Microsoft EdgeView2 Runtime is installed. At some point that will be installed by default, but the easiest way is use the Evergreen Bootstrapper.
Table of Contents
Displaying Arbitrary HTML
To load arbitrary HTML into the TEdgeView, call the NavigateToString method passing the HTML as a string.
|
1 |
EdgeBrowser1.NavigateToString('<html><body><h1>Hello From Delphi</h1></body></html>'); |
And your HTML will immediately render in the browser. No need to save it to a file or other such silliness.
Executing Arbitrary JavaScript
You can execute JavaScript in the TEdgeBrowser with ExecuteScript method
|
1 |
EdgeBrowser1.ExecuteScript('alert("hello Delphi!");') |
This script is executed in the current page, just as if you opened the JavaScript console in the browser, so you are able to interact with the DOM as well.
View The Source
The fundamentals of viewing the source of a page start with the ExecuteScript method, but are a bit more involved. There is an event handler for when a your script finishes executing since it executes asynchronously. You can use that even to return a JSON Object. In this case, the JSON Object is the HTML Source.
|
1 |
EdgeBrowser1.ExecuteScript('encodeURI(document.documentElement.outerHTML)'); |
This uses the DOM (Document Object Model) to grab the Document Element (the root element, or <HTML>) and request the outerHTML, which is all the HTML including the Document Element. We then use encodeURL to encode it. Now for the OnExecuteScriptevent handler
|
1 2 3 4 5 6 7 8 9 |
uses System.NetEncoding; procedure TEdgeViewForm.EdgeBrowser1ExecuteScript(Sender: TCustomEdgeBrowser; AResult: HRESULT; const AResultObjectAsJson: string); begin if AResultObjectAsJson <> 'null' then memoHTML.Text := TNetEncoding.URL.Decode(AResultObjectAsJson).DeQuotedString('"'); end; |
This event fires after every call to ExecuteScript, but the AResultObjectAsJsonwill be 'null' if no results are returns. So we just ignore the ‘null’ values. Otherwise we use the TNetEncoding.URL.Decode to remove the encoding, and remove the quotes with DeQuotedString('"').
You can take the results of this and send right back in with a call to NavigateToString().
Summary
Check out the demo RAD Studio-Demo Kit/10.4.2-demos/EdgeView/ on GitHub.
TEdgeBrowser is just one of the great new and improved features in 10.4.2 Sydney. If you haven’t upgraded you are missing out!
Design. Code. Compile. Deploy.
Start Free Trial Upgrade Today
Free Delphi Community Edition Free C++Builder Community Edition
Dear Jim, is there any way in which we can use the voices and the read aloud that Edge has in its controls? If it is possible use it, it would be great a comment in your blog explaining how to use it in Delphi. Thanks!
I don’t know of anything specific to edge to do this, but you could use the code above and then a text to speech system to do it manually. Have you tried that?
Dear Jim,
I tried your recommendation, but I always get NULL as AResultObjectAsJson. Why? Is this not working for latest Edge (Evergreen Mode)?
I’ve not seen any problems with it, but I’ll try to give it a try and see.
In Step 3, for WebView2Loader.dll, it looks like you have the commands backwards for Win32 and Win64. Not a big deal but I would correct.
Thanks Albert, well spotted! I’ve corrected the text now so it shows the right commands for Win32/Win64
Using encodeURI() results in the conversion of ‘+’ characters to spaces, but using encodeURIComponent() seems to work because ‘+’ characters get properly encoded.
Hi Albert, I think you’re saying you believe you’ve found a problem with the TEdgeBrowser. If you can reproduce this can you please report it on the quality portal so that it can be checked by the QA team? The link is here: https://quality.embarcadero.com
Hello, no, the problem is with the script being executed. It should use encodeURIComponent() instead of encodeURI() because encodeURI() does not encode ‘+’ characters, but ‘+’ characters get decoded to space characters with the Decode() function.
So instead of:
EdgeBrowser1.ExecuteScript(‘encodeURI(document.documentElement.outerHTML)’);
Use:
EdgeBrowser1.ExecuteScript(‘encodeURIComponent(document.documentElement.outerHTML)’);
Seems like there is no ExecuteScript event anymore.
This method still exists as far as I am aware: https://docwiki.embarcadero.com/Libraries/Sydney/en/Vcl.Edge.TCustomEdgeBrowser.ExecuteScript
Why are you encoding the HTML-Source-Code? The Result is encoded JSON anyway.
This avoids encoding it two times:
EdgeBrowser1.ExecuteScript(‘document.documentElement.outerHTML’);
…
uses System.JSON;
procedure TEdgeViewForm.EdgeBrowser1ExecuteScript(Sender: TCustomEdgeBrowser;
AResult: HRESULT; const AResultObjectAsJson: string);
Json: TJSONValue;
begin
Json := TJSONObject.ParseJSONValue(AResultObjectAsJson);
memoHTML.Text := Json.asType;
Json.Free;
end;