Menu
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?
303
To scroll an iframe with JavaScript, we can use the scrollTo method. const myIframe = document. getElementById("iframe"); myIframe. onload = () => { myIframe.
To get or set the scroll position of an element, you follow these steps: First, select the element using the selecting methods such as querySelector() . Second, access the scroll position of the element via the scrollLeft and scrollTop properties.
Set the iframe to the appropriate width and height and set the scrolling attribute to "no". If the area you want is not in the top-left portion of the page, you can scroll the content to the appropriate area.
In order to achieve our goal our easiest way is to apply: window. scrollTo( value-x, value-y ); Here value-x is the pixel value of the width, where you wanna jump or scroll to.
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>
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.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
