6

我有一个 html 页面，其中包含一个 iframe 加载一些任意页面。

<iframe id="siteframe" style="width: 400px; height: 400px;" src="http://www.cnn.com"></iframe>

我希望能够在 javascript/jquery 中获取 iframe内页面的滚动位置。当谈到 html/js 的东西时，我仍然有点不满意，但我尝试了一些使用 scrollTop 和 scrollLeft 的不同变体，但没有成功。这是一个不起作用的：

write($("#siteframe").contents().scrollLeft() + ", " + $("#siteframe").contents().scrollTop());

这个从不写任何东西（write 是一种只附加到屏幕上的文本的方法）。

如果我删除.contents()这样的：

write($("#siteframe").scrollLeft() + ", " + $("#siteframe").scrollTop());

它至少会在屏幕上写入一些内容，但无论 iframe 中的实际滚动位置在哪里，它始终为 0,0。

在javascript中获取iframe中内容的x，y位置以便我的外部页面（包含iframe）可以使用它的正确方法是什么？

4

3 回答 3

5

根据这个堆栈溢出帖子，“结论是 iframe 内的任何内容都无法访问，即使是在我的域上呈现的滚动条也是如此。” 讨论很广泛。除非您有权访问域，否则根本不可能从跨域 iframe 获取信息。

这是我失败的测试代码，以防有人想玩它：

<!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>
于 2013-05-08T03:33:23.583 回答
2

您可以通过将滚动位置从子页面（iframe 内）更新到父页面来解决。

    // Child page
    $(window).scroll(function () {
        top.updateScrollPosition($('body').scrollTop(), $('body').scrollLeft());
    });

和父页面

    // Main page
    var topPos;
    var leftPos;

    function updateScrollPosition(top, left) {
        topPos = top;
        leftPos = left;
    }

然后在任何你想要的地方使用topPos，leftPos。

于 2013-07-12T06:01:06.413 回答
0

要获取滚动位置，请使用窗口对象中存在的属性 scrollX 和 scrollY。

写($("#siteframe").scrollX + ", " + $("#siteframe").scrollY);

通过谷歌浏览器测试

于 2013-05-08T03:19:21.233 回答