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

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());

这个代码什么也不会写（write是一种只附加到屏幕上文本的方法）。

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

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

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

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

Answer 1

根据该堆栈溢出文章 ，“结论是，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。

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

经过谷歌浏览器测试