TsgcWebView2 | JavaScript

TsgcWebView2 provides methods to execute JavaScript in the browser context, retrieve results, and establish two-way communication between your Delphi application and web content.

Async Execution

Use ExecuteScript to run JavaScript asynchronously. The result is returned in the OnScriptExecuted event as a JSON string.

// Execute JavaScript asynchronously
sgcWebView21.ExecuteScript('document.title');

procedure TFormMain.sgcWebView21ScriptExecuted(Sender: TObject;
  aErrorCode: HRESULT; const aResultAsJson: string);
begin
  if aErrorCode = S_OK then
    ShowMessage('Result: ' + aResultAsJson)
  else
    ShowMessage('Script error: ' + IntToStr(aErrorCode));
end;

You can execute any valid JavaScript expression. The return value is always serialized as JSON.

// Get the number of links on the page
sgcWebView21.ExecuteScript('document.querySelectorAll("a").length');

// Modify page content
sgcWebView21.ExecuteScript(
  'document.body.style.backgroundColor = "lightyellow"');

Sync Execution

Use ExecuteScriptSync for blocking execution that returns the result directly. This is simpler when you need the value immediately, but it blocks the calling thread until the script completes.

var
  vResult: string;
begin
  // Get the page title synchronously
  vResult := sgcWebView21.ExecuteScriptSync('document.title');
  ShowMessage('Title: ' + vResult);

  // Get form field value
  vResult := sgcWebView21.ExecuteScriptSync(
    'document.getElementById("email").value');
  ShowMessage('Email: ' + vResult);
end;

Init Scripts

Use AddInitScript to register JavaScript that runs automatically on every page load, before any other scripts on the page. This is useful for injecting polyfills, overriding browser APIs, or setting up message handlers.

// Add a script that runs on every page load
sgcWebView21.AddInitScript(
  'window.addEventListener("DOMContentLoaded", function() {' +
  '  console.log("Page loaded at: " + new Date().toISOString());' +
  '});');

// Override window.alert to send messages to Delphi
sgcWebView21.AddInitScript(
  'window.alert = function(msg) {' +
  '  window.chrome.webview.postMessage(msg);' +
  '};');

Use RemoveInitScript to unregister a previously added init script by its ID.

Web Messaging

Web messaging provides two-way communication between your Delphi application and JavaScript running in the browser. Use PostWebMessageAsString or PostWebMessageAsJson to send data from Delphi to JavaScript, and handle OnWebMessageReceived to receive data from JavaScript.

Sending messages from Delphi to JavaScript:

// Send a plain string message
sgcWebView21.PostWebMessageAsString('Hello from Delphi!');

// Send a JSON message
sgcWebView21.PostWebMessageAsJson('{"action":"refresh","id":42}');

Receiving messages in JavaScript:

// Add an init script to listen for messages from Delphi
sgcWebView21.AddInitScript(
  'window.chrome.webview.addEventListener("message", function(e) {' +
  '  console.log("Received from Delphi: " + e.data);' +
  '});');

Receiving messages from JavaScript in Delphi:

procedure TFormMain.sgcWebView21WebMessageReceived(Sender: TObject;
  const aSource, aWebMessageAsJson, aWebMessageAsString: string);
begin
  // aWebMessageAsString contains the plain text message
  // aWebMessageAsJson contains the JSON-serialized message
  Memo1.Lines.Add('Message from web: ' + aWebMessageAsString);
end;

From JavaScript, send messages to Delphi using:

// JavaScript code inside the web page:
// window.chrome.webview.postMessage('Hello from JavaScript!');
// window.chrome.webview.postMessage({action: 'save', data: [1,2,3]});