Detect when user interact with IFrame JavaScript

Question

I found a lot of posts about that but I still didn't find solution.

I am trying to detect when user in doing something on IFrame. Example, mousemove or keypress. My IFrame is different domain than website which display that IFrame.

How I can detect mouse move or keypress on IFrame which is different domain?

Thanks

If that were possible, what would prevent a malicious website to display, for example, the yahoo login page in the iframe and read all keypresses inside the password field? — Salman A, Nov 03 '14 at 22:37
But is it possible to make some configuration on another website which can allow CORS? Because I own child domain website. — kat1330, Nov 03 '14 at 23:20
If you own both domains then use CORS or post message methods described here: http://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy — Salman A, Nov 04 '14 at 07:59

score 2 · Accepted Answer · answered Nov 03 '14 at 22:29

2

You can hook up events to the IFrame like any other element - for example $('#my_iframe').mouseover(function(){ alert('over!'); }); will fire whenever the user mouse over the iframe.

But that's not useful, really. If you want to capture events which are happening on the content of the frame, you can't do this. e.g. $('#my_frame').contents().mouseover(function(){ alert('moved!'); }); will not work.

This is because of the Same Origin Policy, and there's no way around it!

answered Nov 03 '14 at 22:29

Dave Salomon

3,287
1
17
29

Thanks for your post. So you mean that if is different domain I cannot send JS event from child to parent window? – kat1330 Nov 03 '14 at 22:44
Well, if you have control over the page the frame is pointing at, you can add the listener on _that_ page, which will fire. If you have no control over the page which is loaded in the frame, then you're out of luck. – Dave Salomon Nov 05 '14 at 14:10

james emanon · Answer 2 · 2014-11-03T22:33:44.607

0

I've had success using "on"..ala..

CAVEAT: this will note changes in the IFRAME container sitting on the page. Since, the parent page will have knowledge of this. This will not catch events emitting from a seperate iframe or the page therein, not controlled by parent.

$("iframe").on("mouseover focus",function(){ 
     // do your stuff
});

If you want to only act on an iframe with a certain source, then something like:

var usedSrc = /facebook|twitter/;

    $('iframe').on('mouseover focus', 
      function () {
          if(usedSrc.test($(this).attr('src'))){
                 // do your stuff
          }
      }  
    );

edited Nov 03 '14 at 22:33

answered Nov 03 '14 at 22:27

james emanon

11,185
11
56
97

1

note: this is listening for events on the iframe container, it will not catch events originating within the actual iframe, as the op requests. – levi Nov 03 '14 at 22:29
Thanks for this post. But I already try with mouseover and it doesn't work for me because it only work when user move mouse from parent page to IFrame. If is user focused only in IFrame and moving mouse only in IFrame this event doesn't happened. – kat1330 Nov 03 '14 at 22:33
have you tried adding "focus" to the event handler? I updated my original code. But yes, if iframe html page sets the event, then yeah - not sure what can be done. – james emanon Nov 03 '14 at 22:37
Yes I tried. But unfortunately doesn't work like I need. General idea is if user doesn't work nothing I need after some time do something e.g. detect when user doesn't work nothing 5 min. If user leave mouse on iframe, iframe will be focused but I still don't know whether user doing something or he doing nothing. Because I need information when user moving mouse or typing. – kat1330 Nov 03 '14 at 22:51

Detect when user interact with IFrame JavaScript

2 Answers2