Catch all events in iframe jQuery and replicate

Question

that's the question:

I have an iframe that displays any webpage (not necessarily designed by me). On this page events can be attached (which, presumably, I do not know).

How can I dynamically intercept these events and save them for later replication?

for example: suppose that when a mouse moves over a specific div, it changes color. I would like to make sure that when an event that changes color to a div is triggered, it will be “registered” with the entire sequence A, which will allow me (without user interaction) to repeat it later.

ideas? both for recording and for subsequent replication

Answer 1

Short answer: you cannot .

You cannot access the document object of "any web page" using JavaScript on your page if it is in a different domain, which I assume if you say "any web page" because of the same origin policy . To do this, you will need a website in IFRAME to work with your script, which is not the case with "any web page."

IFRAME in the same domain
If your web page is in the same domain, you can access the events of the body IFRAME element by adding a listener for each event that you want to catch, as described here . This is possible for all events that create bubbles in the body. Therefore, if you have events that cannot bubble up the body, they will not catch this decision.

jQuery('#website body').on('click mouseover mouseout', function(event) { console.log(event.type); }); 

Assuming you have an IFRAME with the website identifier, you can catch the events you want by listing them, separated by spaces, as indicated above. In the example, we get click , mousover and mouseout .

Maybe this is closer to what you want?

Answer 2

Add event handlers to your divs. For your example you can use

 $('#div').mouseover(function(e) { ... }) 

or

 ('#div').on('mouseover', function(e) { ... }) 

For "replication" you will need to store information about past events in some object. You can even save an event object.