How do I detect the button click (html) on Tchromium Cef4delphi?

Asked

Viewed 795 times

2

I have the Tchromium Cef4delphi component loading a web page, and on that web page I have a button.
It is possible to detect the click of this button on the web page (html) and open for example a Delphi form?

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

  • Is this page something generated by your program or is it something random? You will only be able to detect the click on a button of a page that you control, if you control the page called just make the detection of the click on the button (button.click) on the front and call the Delphi API on the back.

  • It’s a separate page, a simple local Index.html, which would control the page?

  • if it is a local page, it means that you have access to its code (that’s what I meant by controlling the page), then you can implement a JS or php call from an API (Procedure or Function) of Delphi. I believe I can solve your problem by studying a little bit about: "how to detect a click and call a function" in JS, "http call of an API" in JS and how to "do a backend in Delphi".

  • Got it thank you

  • I will answer with an example to facilitate your life friend. One minute.

1 answer

2


It is 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 terms of performance it is recommended to do so)however as you have not posted any code and to avoid a time consuming implementation for you I will use the requests and resources of the Delphi and of TChromiumin this example:


Suppose 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 property id.
As you can notice, the button has the property id with the value "button", it will be used to identify this button.
Now we’ll make a Listener for the button click event, I will do this through the event that detects when the page clicked, the OnLoadEnd.
Then when the page is loaded, the event OnLoadEnd will be fired, I will sweep the DOM of the page in search of the element with the id botao and attach the Listener for the click of the button.

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 is valid to remember that you can use these small changes in your HTML to track any element of the page and of course, you can use how many Listeners want to track interactions with various elements of the page at once.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.