Question

我有一个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());

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

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

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

它至少会向屏幕写入一些东西，但无论iframe中的实际滚动位置在哪里，它总是0,0。

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

Answer 1

根据this stack overflow post，“结论是iframe中的任何内容都无法访问，即使是在我的域上呈现的滚动条也是如此。”讨论很广泛。除非您有权访问该域，否则根本无法从跨doamin 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>

Answer 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。

Answer 3

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

写（$（“＃siteframe”）。scrollX +“，”+ $（“＃siteframe”）。scrollY）;

通过Google Chrome测试

如何获取iframe内容的滚动位置

3 个答案: