CODEWITHSUNDEEP
javascriptjqueryhtmliframescroll
FoamyGuy
FoamyGuy

Reputation: 46856

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

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?

Upvotes: 6

Views: 35495

Answers (3)

Robin
Robin

Reputation: 31

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.

Upvotes: 2

skibulk
skibulk

Reputation: 3188

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>

Upvotes: 6

br araujo
br araujo

Reputation: 1872

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

Upvotes: 0

Related Questions