1

This is the question:

I have an iframe that displays any web page (not necessarily developed by me). On this page may be attached events (which presumably I do not know).

How can I dynamically intercepting these events and store them for later replicate?

For example: suppose that when the mouse moves over a certain div it changes color. I would like to make sure that when you trigger the event that would change color to the div it is "registered" with all a series of information that will allow me (without user interaction) to replicate it at a later time.

Ideas for both the recording and subsequent replication?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
jenjis
  • 1,077
  • 4
  • 18
  • 30

2 Answers2

2

The short answer is: you cannot.

You cannot access the document object of "any web page" with JavaScript on your page if it is on a different domain, which I assume if you say "any web page", because of the Same Origin Policy. You would need the website in the IFRAME to cooperate with your script to achieve this, which will not happen with "any web page".

IFRAME on same domain
If your web page is on the same domain then you can access the events of the IFRAMEs body element by adding a listener for every event you want to catch like described here. This is possible for all events that bubble up to the body. So if you have Events that are prevented from bubbling upwards to the body, they will not be catched with this solution.

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

Assuming you have an IFRAME with the id website you can catch the events you wish by listing them separated with spaces as above. The example catches click, mousover and mouseout.

Maybe this is closer to what you want?

Community
  • 1
  • 1
crackmigg
  • 5,571
  • 2
  • 30
  • 40
  • Okay, so let's say I do this on the same domain. I overcome the Same Origin Policy via a proxy, but it is not of interest in this topic. What I'm interested in is how you can do this: how can I intercept events fired by a page, record them and play them back at a later time. Thanks anyway for the quick response – jenjis Dec 08 '12 at 23:20
  • yes, thanks, I had read such a solution in another post, but that would add a listener for each event that I added to every element on the page, right? More specifically I was looking for something that would make me recognize the events already on the page and intercept. browsing I found something like $("#element").data("events"); but I cannot find online documentation or specific examples of how to use it :( – jenjis Dec 09 '12 at 11:13
  • With the [jQuery.data](http://api.jquery.com/data/) you can store data to a DOM element. I doubt it will be useful in your case. – crackmigg Dec 09 '12 at 11:47
0

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

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

or 

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

For 'replication', you'd have to store information about past events in some object. You could even store the event object itself.

ktm5124
  • 11,861
  • 21
  • 74
  • 119
  • This solution assumes that I know the elements of the page, and the events are attached to them; I look for a generic solution, an "allEventListener" – jenjis Dec 08 '12 at 19:12