jQuery 如何获取 iframe 内内容的滚动位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16431704/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get the scroll position of content thats inside of an iframe
提问by FoamyGuy
I have an html page that contains an iframe loading up some arbitrary page.
我有一个 html 页面，其中包含加载一些任意页面的 iframe。
<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 insidethe 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:
我希望能够在 javascript/jquery 中获取 iframe内页面的滚动位置。当涉及到 html/js 的东西时，我仍然有点绿色，但我尝试了使用 scrollTop 和 scrollLeft 的一些不同变体，但没有成功。这是一个不起作用的：
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).
这个永远不会写任何东西（write 是一种只附加到屏幕上的文本的方法）。
if I remove the .contents()like this:
如果我删除.contents()这样的：
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.
它至少会向屏幕写入一些内容，但无论 iframe 中的实际滚动位置在哪里，它始终为 0,0。
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?
在javascript中获取iframe中内容的x，y位置以便我的外部页面（包含iframe）可以使用它的正确方法是什么？
采纳答案by skibulk
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.
根据这个堆栈溢出帖子，“结论是 iframe 中的任何内容都无法访问，即使是在我的域上呈现的滚动条。” 讨论范围很广。除非您有权访问域，否则根本不可能从跨域 iframe 获取信息。
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>
回答by Robin
You may work around by updating the scroll position from child page (inside iframe) to parent page.
您可以通过将滚动位置从子页面（iframe 内）更新到父页面来解决。
// 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.
然后在任何你想要的地方使用 topPos、leftPos。
回答by br araujo
TO get the scroll position use the attributes scrollX and scrollY that exists in the window object.
要获取滚动位置，请使用 window 对象中存在的属性 scrollX 和 scrollY。
write($("#siteframe").scrollX + ", " + $("#siteframe").scrollY);
写($("#siteframe").scrollX + ", " + $("#siteframe").scrollY);
Tested over google Chrome
通过谷歌浏览器测试
