I have an html page that contains an iframe loading up some arbitrary page.
<iframe id="siteframe" style="width: 400px; height: 400px;" src=""></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 es 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?
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."></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 es 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?
Share Improve this question asked May 8, 2013 at 2:28 FoamyGuyFoamyGuy 46.9k19 gold badges130 silver badges159 bronze badges 2- 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 Commented May 8, 2013 at 2:48
-
If you want just hide part of the iframe - consider wrapping iframe with
overflow:hidden;styled element and adding negative CSStopto the iframetop: -20px; /*or some other value*/, this will hide the part of the iframe you DONT WANT TO DISPLAY at all... – jave.web Commented Sep 3, 2014 at 10:11
3 Answers
Reset to default 6According 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./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/wiki/Hello_world"></iframe><br />
<button onclick="report()">Get Coords</button>
</body>
</html>
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.
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