如何获得内部框架内的滚动位置

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

它至少写一些东西到屏幕，但它始终是0,0无论身在何处的iframe的实际工作中滚动位置。

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

来源

2013-05-08 FoamyGuy

iframes是棘手的，因为它们限制你访问他们正在发生的事情，出于安全原因。我不认为你可以直接获取这些信息。一种选择*可能会使iframe变大，并将iframe放入滚动div中，以便用户滚动div而不是iframe本身。我目前没有时间确保此作品，祝你好运！ – FloatingCoder 2013-05-08 02:48:06

如果你只想隐藏iframe的一部分 - 考虑使用overflow：hidden;样式化元素来包装iframe，并向iframe顶部添加负面CSS顶部。/*或其他值* /'，这将隐藏您不想显示的iframe部分... – 2014-09-03 10:11:51

据this stack overflow post“的结论是，iframe中什么是无法访问的，即使是在我的领域呈现滚动条。”讨论是广泛的。除非您有权访问域，否则根本无法从跨域dorame 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-08 03:33:23 skibulk

获取滚动位置使用窗口对象中存在的属性scrollX和scrollY。（$＃“＃siteframe”）。scrollX +“，”+ $（“＃siteframe”）。scrollY）;}}

测试了谷歌chrome

来源

2013-05-08 03:19:21

为跨域iframe返回null或undefined。 – skibulk 2013-05-08 03:34:39

您可以变通解决通过更新从子页面（里面的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-12 06:01:06 Robin

这意味着你有权访问框架的来源 – 2014-09-04 11:34:19

如何获得内部框架内的滚动位置

回答

相关问题