How to get the scroll position of content thats inside of an iframe

Question

I have an html page that contains an iframe loading up some arbitrary page.

<iframe id="siteframe" style="width: 400px; height: 400px;" src="http://www.cnn.com"></iframe>

I want to be able to get the scroll position of the page inside the iframe in javascript/jquery. I am still a bit green when it comes to html/js stuff but I've tried a few different variations of using scrollTop and scrollLeft, but had no success. Here is one that didn't work:

write($("#siteframe").contents().scrollLeft() + ", " + $("#siteframe").contents().scrollTop());

this one doesn't ever write anything (write is a method that just appends to the text on the screen).

if I remove the .contents() like this:

write($("#siteframe").scrollLeft() + ", " + $("#siteframe").scrollTop());

it at least writes something to the screen but it is always 0,0 no matter where the actuall scroll position in the iframe is.

What is the proper way to obtain the x,y position of the content within the iframe in javascript so that my outside page (that contains the iframe) can use it?

Iframes are tricky as they limit your access to what's going on in them for security reasons. I don't think you can get that information directly. One alternative *might* be to make the iframe larger, and put the iframe in a scrolling div, so the users are scrolling the div and not in the iframe itself. I don't have time to insure this works at the moment, good luck! — FloatingCoder, May 08 '13 at 02:48
If you want just hide part of the iframe - consider wrapping iframe with `overflow:hidden;` styled element and adding negative CSS `top` to the iframe `top: -20px; /*or some other value*/`, this will hide the part of the iframe you DONT WANT TO DISPLAY at all... — jave.web, Sep 03 '14 at 10:11

score 6 · Accepted Answer · edited May 23 '17 at 11:59

According to this stack overflow post, "the conclusion is that anything inside the iframe is not accessible, even the scrollbars that render on my domain." The discussion is extensive. It's simply not possible to get information from a cross doamin iframe unless you have access to the domain.

Here's my failed testing code in case anybody wants to play with it:

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<script>
function report() {
    var frame_top = $('#siteframe').contents().find('body').scrollTop();
    alert(frame_top);
}
</script>
<iframe id="siteframe" name="siteframe" style="width: 400px; height: 400px;" src="http://en.wikipedia.org/wiki/Hello_world"></iframe><br />
<button onclick="report()">Get Coords</button>
</body>
</html>

score 2 · Answer 2 · answered Jul 12 '13 at 06:01

You may work around by updating the scroll position from child page (inside iframe) to parent page.

    // Child page
    $(window).scroll(function () {
        top.updateScrollPosition($('body').scrollTop(), $('body').scrollLeft());
    });

And the parent page

    // Main page
    var topPos;
    var leftPos;

    function updateScrollPosition(top, left) {
        topPos = top;
        leftPos = left;
    }

Then use topPos, leftPos wherever you want.

That implies that you have access to the source of the frame — Yassir Ennazk, Sep 04 '14 at 11:34

score 0 · Answer 3 · answered May 08 '13 at 03:19

0

TO get the scroll position use the attributes scrollX and scrollY that exists in the window object.

write($("#siteframe").scrollX + ", " + $("#siteframe").scrollY);

Tested over google Chrome

answered May 08 '13 at 03:19

br araujo

1,856
2
13
14

8

Returns null or undefined for cross domain iframes. – skibulk May 08 '13 at 03:34

How to get the scroll position of content thats inside of an iframe

3 Answers3

Linked