Clicking something in TEdgeBrowser

[softtouch 9]

I am trying to find, without success, information about how to catch when somebody click in a TEdgeBrowser into a form field, or on a table, or any other element. I can catch hyperlick clicks, but thats all so far. Is that even possible? What I need to do is, when a user click somewhere, to show the source code of that element.

[FPiette 383]

43 minutes ago, softtouch said:

What I need to do is, when a user click somewhere, to show the source code of that element.

I didn't explain what's your goal is behind this technical question. If it is for debugging, why don't you use the "inspect" feature of the browser? Right click on any item on a loaded webpage will pop a menu up. Then select "inspect" and a secondary window will open with the source code and the clicked item shown.

 

[PeaShooter_OMO 11]

10 hours ago, softtouch said:

I am trying to find, without success, information about how to catch when somebody click in a TEdgeBrowser into a form field, or on a table, or any other element. I can catch hyperlick clicks, but thats all so far. Is that even possible? What I need to do is, when a user click somewhere, to show the source code of that element.

It is possible to detect user clicks via a combination of the TEdgeBrowser's OnWebMessageReceived event and its ExecuteScript method along with Javascript but because of your last sentence I am unsure of what you actually want and for that one FPiette's suggestion is good.

[softtouch 9]

12 hours ago, FPiette said:

I didn't explain what's your goal is behind this technical question. If it is for debugging, why don't you use the "inspect" feature of the browser? Right click on any item on a loaded webpage will pop a menu up. Then select "inspect" and a secondary window will open with the source code and the clicked item shown.

 

What I want is that the user load a website, and can click on any element/text/whatever on that page, and that the outerhtml will be displayed, no more, no less. Using the "inspect" is way to confusing for the user.

[PeaShooter_OMO 11]

33 minutes ago, softtouch said:

and that the outerhtml will be displayed

As a messagebox or as the only content of the EdgeBrowser by removing the rest?

[softtouch 9]

7 minutes ago, PeaShooter_OMO said:

As a messagebox or as the only content of the EdgeBrowser by removing the rest?

It might be in a memo, so I need just the text to process it further.

[PeaShooter_OMO 11]

This should give you an idea

 

type
  TForm3 = class(TForm)
    EdgeBrowser: TEdgeBrowser;
    Button1: TButton;
    procedure Button1Click(Sender: TObject);
    procedure EdgeBrowserWebMessageReceived(Sender: TCustomEdgeBrowser;
      Args: TWebMessageReceivedEventArgs);
    procedure EdgeBrowserNavigationCompleted(Sender: TCustomEdgeBrowser;
      IsSuccess: Boolean; WebErrorStatus: TOleEnum);
  private
  public
  end;

var
  Form3: TForm3;

implementation

{$R *.dfm}

procedure TForm3.Button1Click(Sender: TObject);
begin
  EdgeBrowser.Navigate('https://www.google.com');
end;

procedure TForm3.EdgeBrowserNavigationCompleted(Sender: TCustomEdgeBrowser;
  IsSuccess: Boolean; WebErrorStatus: TOleEnum);
begin
  EdgeBrowser.ExecuteScript('window.addEventListener("click",function(e) {' +
                            '                                  e = e || window.event;' +
                            '                                  var target = e.target || e.srcElement;' +
                            '                                  var text = target.textContent || target.innerText;' +
                            '                                  window.chrome.webview.postMessage(target.outerHTML);' +
                            '                                }, false);');
end;

procedure TForm3.EdgeBrowserWebMessageReceived(Sender: TCustomEdgeBrowser;
  Args: TWebMessageReceivedEventArgs);
var
  LMsg : PWideChar;
begin
  Args.ArgsInterface.TryGetWebMessageAsString(LMsg);
  ShowMessage(LMsg);
end;

 

[softtouch 9]

1 minute ago, PeaShooter_OMO said:

This should give you an idea

 

type
  TForm3 = class(TForm)
    EdgeBrowser: TEdgeBrowser;
    Button1: TButton;
    procedure Button1Click(Sender: TObject);
    procedure EdgeBrowserWebMessageReceived(Sender: TCustomEdgeBrowser;
      Args: TWebMessageReceivedEventArgs);
    procedure EdgeBrowserNavigationCompleted(Sender: TCustomEdgeBrowser;
      IsSuccess: Boolean; WebErrorStatus: TOleEnum);
  private
  public
  end;

var
  Form3: TForm3;

implementation

{$R *.dfm}

procedure TForm3.Button1Click(Sender: TObject);
begin
  EdgeBrowser.Navigate('https://www.google.com');
end;

procedure TForm3.EdgeBrowserNavigationCompleted(Sender: TCustomEdgeBrowser;
  IsSuccess: Boolean; WebErrorStatus: TOleEnum);
begin
  EdgeBrowser.ExecuteScript('window.addEventListener("click",function(e) {' +
                            '                                  e = e || window.event;' +
                            '                                  var target = e.target || e.srcElement;' +
                            '                                  var text = target.textContent || target.innerText;' +
                            '                                  window.chrome.webview.postMessage(target.outerHTML);' +
                            '                                }, false);');
end;

procedure TForm3.EdgeBrowserWebMessageReceived(Sender: TCustomEdgeBrowser;
  Args: TWebMessageReceivedEventArgs);
var
  LMsg : PWideChar;
begin
  Args.ArgsInterface.TryGetWebMessageAsString(LMsg);
  ShowMessage(LMsg);
end;

 

Wow, cool, thanks a lot! I will play with it. So the window.addEventListener is the key to do what I want.

[PeaShooter_OMO 11]

Whatever you are looking for you will probably find by searching for Javascript examples

Edited January 11 by PeaShooter_OMO