How to detect the button click (html) on TChromium CEF4Delphi?

Question

How to detect the button click (html) on TChromium CEF4Delphi?

Navigation

#1 by (2 votes)

2

I have the TChromium component CEF4Delphi loading a web page, and in this web page I have a button. Is it possible to detect the click of this button on the web page (html) and open for example a delphi form?

If this is not possible, is there a browser component with this option?

html delphi

asked by anonymous 28.12.2017 / 18:34

1 answer

Use of tool under GPLv3 "contaminates" my application? Multiple select list with items already selected using Razor

score 2 · Accepted Answer

Is it possible to detect the click of this button on the web page (html) and open for example a delphi form?

Yes, as I mentioned in the comments, this can be done through a front-end interaction by calling an API (through an http request) from the back end of your web application (and in performance is recommended to do this ), however as you have not posted any code and to avoid a lengthy implementation for you I will use the requests and resources of Delphi and TChromium in this example:

Assuming your html page looks like this:

<html>
  <body>
     /...
     <button id="botao" type="button">Botão</button>
     /...
  </body>
</html>

You must identify the element you want to track with the id property. As you may notice, the button has the id property with the value "button", it will be used to identify this button. Home Now we will make a Listener for the button's click event, I will do this through the event that detects when the page has loaded, OnLoadEnd . So when the page loads, the OnLoadEnd event will be fired, I will scan the DOM of the page for the element with the id botao and will append Listener to the button click.

unit Unit1;

interface

uses
  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
  Dialogs, cefvcl, ceflib;

type
  TForm1 = class(TForm)
    Chromium1: TChromium;
    procedure FormCreate(Sender: TObject);
    procedure Chromium1LoadEnd(Sender: TObject; const browser: ICefBrowser;
      const frame: ICefFrame; httpStatusCode: Integer; out Result: Boolean);
  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.dfm}

procedure TForm1.FormCreate(Sender: TObject);
begin
  Chromium1.Load('C:\File.html'); //carregando a página
end;

procedure TForm1.Chromium1LoadEnd(Sender: TObject; const browser: ICefBrowser;
  const frame: ICefFrame; httpStatusCode: Integer; out Result: Boolean);
begin
  if Assigned(frame) then //Se acabou o carregamento da pagina executamos isso
    frame.VisitDomProc(OnExploreDOM); //chamada de evento OnExploreDOM para acharmos nosso botão
end;

procedure OnExploreDOM(const ADocument: ICefDomDocument);
var
  DOMNode: ICefDomNode;
begin
  // aqui tentaremos achar o elemento que você identificou com o id
  DOMNode := ADocument.GetElementById('botao');
  // e se acharmos o evento que queremos será anexado
  if Assigned(DOMNode) then
    DOMNode.AddEventListenerProc('click', True, BotaoClickEvent);
end;

procedure BotaoClickEvent(const AEvent: ICefDomEvent);
begin
  Form2.FormOpen; //aqui você indica o form que quer abrir e  
                  //como deseja abrir (Show, ShowModal, Open, etc.)
end;

end.

NOTE: It's worth remembering that you can use these small changes in your HTML to track any element of the page, and of course, you can use as many% as you want to track interactions with multiple page elements at once.