innerHTML with TAdvWebBrowser

VCL TMS VCL UI Pack
15

Hi,

So what you can do to communicate with the client from a web-page, is installing a bridge. This involves adding an object, that implements the IAdvCustomWebBrowserBridge. This allows you to call the object from JavaScript and send a message back to the client. The important part is:

  '    var obj = window.chrome.webview.hostObjects.sync.MyBridge;' + LB +
  '    console.log(obj);' + LB +
  '    if (obj) {' + LB +
  '      obj.ObjectMessage = "Hello World";' + LB +
  '    }' + LB +

BridgeSample.zip (6.0 KB)

unit Unit22;

interface

uses
  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes, Vcl.Graphics,
  Vcl.Controls, Vcl.Forms, Vcl.Dialogs, AdvCustomControl, AdvWebBrowser,
  Vcl.StdCtrls;

type
  TMyBridgeObject = class(TInterfacedObject, IAdvCustomWebBrowserBridge)
    function GetObjectMessage: string;
    procedure SetObjectMessage(const AValue: string);
  published
    property ObjectMessage: string read GetObjectMessage write SetObjectMessage;
  end;

  TForm22 = class(TForm)
    AdvWebBrowser1: TAdvWebBrowser;
    Button1: TButton;
    procedure FormCreate(Sender: TObject);
  private
    { Private declarations }
    FMyBridge: TMyBridgeObject;
  public
    { Public declarations }
  end;

var
  Form22: TForm22;

implementation

{$R *.dfm}

uses
  AdvUtils;

procedure TForm22.FormCreate(Sender: TObject);
const
  LB = #13#10;
  MyHTML: string =
  '<!DOCTYPE html>' + LB +
  '<html>' + LB +
  '<body>' + LB +

  '<button onclick="myFunction()">Click me</button>' + LB +

  '<script>' + LB +
  '  function myFunction() {' + LB +
  '    var obj = window.chrome.webview.hostObjects.sync.MyBridge;' + LB +
  '    console.log(obj);' + LB +
  '    if (obj) {' + LB +
  '      obj.ObjectMessage = "Hello World";' + LB +
  '    }' + LB +
  '  }' + LB +
  '</script>' + LB +

  '</body>' + LB +
  '</html>';
begin
  FMyBridge := TMyBridgeObject.Create;
  AdvWebBrowser1.AddBridge('MyBridge', FMyBridge);
  AdvWebBrowser1.LoadHTML(MyHTML);
end;

{ TMyBridgeObject }

function TMyBridgeObject.GetObjectMessage: string;
begin

end;

procedure TMyBridgeObject.SetObjectMessage(const AValue: string);
begin
  TAdvUtils.Log(AValue);
end;

end.