get the elements mouse is over for the html in iframe

Question

How do I get the elements that the mouse is over in an iframe? The following code works for a HTML page but not the html in the iframe>

<head>
    <script type="text/javacsript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        $(document).ready(function ({
            $('body').mousemove(function (e) {
                var details = e.target.id;
                console.log(details);
            });
         });
    </script>
</head>

<body>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
    <div id="four"></div>
    <iframe src="http://www.w3schools.com" width="800" height="800" id="five"></iframe>
</body>

Major security issue here if you were allowed to do that in an iframe that is not on the same domain. Let think of an iframe that loads a financial website and get injected in order to redirect all the credentials to a mysterious person. Nasty... so you can't do that, unless you are also controlling that domain (see: same-origin-policy) — Frederik.L, May 27 '13 at 14:25

score 2 · Accepted Answer · edited May 23 '17 at 11:43

2

You have to set that code into the web page that you load in the iframe. That's because you are showing another web page into the iframe. Then, your main page and your iframe have their own CSS, JS, etc. If you don't want to add that code into your web page that is loaded into the iframe, you will have to access it using something like this:

//THIS IS AN EXAMPLE
$("#iFrame").contents().find("#someDiv").removeClass("hidden");

For your example, I suggest to use this:

<script type="text/javacsript" src="http://ajax.googleapis.com/ajax/libs/jquery/
    1.9.1/jquery.min.js"></script>

<script> //YOU FORGOT TO ADD THIS OPENING SCRIPT TAG
    $(document).ready(function({
        // THIS SHOULD WORK FOR YOUR MAIN PAGE
        $('body').mousemove(function (e) {
            var details = e.target.id;
            console.log(details);
        });
        // THIS SHOULD WORK FOR YOUR IFRAME
        $("#iFrame").contents().find.('body').mousemove(function (e) {
            var details = e.target.id;
            console.log(details);
        });
    });
</script>

Reference: Accessing Iframe

Hope it helps.

edited May 23 '17 at 11:43

Community

1
1

answered May 27 '13 at 14:04

DaGLiMiOuX

889
9
28

but it must be possible from the outer page? – Hello-World May 27 '13 at 14:06
so are you saying that I must inject the mouse move event and jquery? thanks for your help. – Hello-World May 27 '13 at 14:11
@Hello-World I will update with an example that should work in your case. **Added example** – DaGLiMiOuX May 27 '13 at 14:11
2

Aside from syntax errors, this would only work if the frame is from the same domain, which is not the case in the example. – Felix Kling May 27 '13 at 14:17
@FelixKling That's true. I suggested this if it is from the same domain. If it is an external url that you don't manage like in the example (I supposed that url was just as an url example), you can't add your javascript mouse event to that web page, obviusly. That's why I posted that link to Stackoverflow, if someone wanted more information about accessing an Iframe and `Same origin policy`. – DaGLiMiOuX May 27 '13 at 14:19

get the elements mouse is over for the html in iframe

1 Answers1