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

javascript jquery html iframe scroll

28,270

Solution 1

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>

Solution 2

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.

28,270

Author by

FoamyGuy

Youtube Android Tutorials | github.com/FoamyGuy

Updated on August 21, 2022

Comments

FoamyGuy over 1 year
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?
skibulk about 11 years

Returns null or undefined for cross domain iframes.
Yassir Ennazk over 9 years

That implies that you have access to the source of the frame