logo标签列表

如何获取嵌套在iframe中的内容的滚动位置

javascriptjqueryhtmliframescroll
6
我有一个包含 iframe 的 HTML 页面，加载了一些任意页面。
<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 的外部页面可以使用它吗？

Iframes很棘手，因为出于安全原因，它们限制了您对其中发生的事情的访问。我认为您无法直接获取该信息。一个替代方案可能是使iframe更大，并将iframe放入滚动div中，以便用户滚动div而不是在iframe本身中滚动。我现在没有时间确保这起作用，祝你好运！ - FloatingCoder
如果您只想隐藏 iframe 的一部分 - 考虑使用 overflow:hidden; 样式的元素包装 iframe，并在 iframe 上添加负 CSS top，例如 top: -20px; /*或其他值*/，这将完全隐藏您不想显示的 iframe 部分... - jave.web
3个回答
6
根据这篇stackoverflow帖子，“结论是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>
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在您想要的任何地方。
4
这意味着你可以访问帧的源代码。 - Yassir Ennazk
0

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

写入代码为：$("#siteframe").scrollX + ", " + $("#siteframe").scrollY;

在 Google Chrome 中测试过。

8
对于跨域的 iframe，返回 null 或 undefined。 - skibulk
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接