DOM element change?

[subin]

Hi
We need to know some way of knowing DOM Changed if the user make some changes in the page loaded in TChromium browser. IS there any way or event in the TChromium component to know if the DOM element has changed. PLease help.

Thank you

[salvadordf]

Hi,

Try this and call a custom JS extension when the DOM changes :
https://stackoverflow.com/questions/3219758/detect-changes-in-the-dom

[subin]

Thanks for your reply.
We need to set an existing property in Delphi when a Dom element value get changed. Please let me know how can set the property in Delphi.

Thank you

[salvadordf]

CEF doesn't expose any event for generic DOM changes.

You have to use a MutationObserver in JavaScript and then call a custom JavaScript extension or send a custom console message from JavaScript to let Delphi know when the DOM has changed.

https://developer.mozilla.org/en-US/docs/Web/API/MutationEvent
https://plainenglish.io/blog/how-to-watch-for-dom-changes-with-javascript

Read the code comments in the DOMVisitor demo to know all the details about using the "console trick".

[subin]

Thank you so much for your reply.
In my case I am loading an external webpage into the embedded browser in a Delphi application. Please let me know where the MutationObserver Javascript code needs to be written.

Thank you

[salvadordf]

Use the TChromium.OnLoadingStateChange event and check that "isLoading" is false.

Then call TChromium.ExecuteJavaScript with the JavaScript code you want to inject.
https://github.com/salvadordf/CEF4Delphi/blob/0aef2e638b85fff77cb1fb9769301ac6152aee76/demos/Delphi_VCL/DOMVisitor/uDOMVisitor.pas#L792

[subin]

Thanks for the reply.
We are loading the we page created by another team and we will make changes to the input fields in UI. There is already an hidden field which holds boolean value in thewebpage that we can used to know if any unsaved changes are made. The requirement is when the user doesnot save the changes and try to navigate away from the embedded browser, we need to prompt a warning message. We have implemented a solution on onclosequery of the form that hold the browser. But this solution is not feasible to another scenarios due to existing implementation. Then we think about the solution that if we came to know if the DOM element (hidden field value) has changed, we can set an existing flag to prompt the warning message. In this case the we would like to know where the mutationobserver code fits into?

thank you

[subin]

Hi,
I have called the Mutation code from OnLoadingStateChange. However the isLoading value is always 'True'. If I make any changes in the web page and saved, then the mutation code is not getting executed. However is any changes is made, at that moment the mutation code is executing. Please let how to invoke mutation code once after the user has saved the changes.

Thank you
Subin

[salvadordf]

Use these events to know when the user enters and exits that web page :

• TChromium.OnBeforeBrowse
• TChromium.OnLoadStart
• TChromium.OnLoadEnd
• TChromium.OnLoadingStateChange

Use a boolean variable in Delphi to know when the mutationobserver has been executed for the first time since the user entered that web page.

[subin]

Thank you so much for your time and for your reply.
I thought the Mutation Observer code executed once will sit forever. However I need to invoke each time any change in the webpage is made. Also noticed if the dom element change happen for a boolean value will not send console message when the value changed to the initial value. Is my understanding is correct?