点击 iframe → 父窗口滚动到位置？
Posted
技术标签:
【中文标题】点击 iframe → 父窗口滚动到位置？【英文标题】：Click in iframe → Parent window scroll to position? 【发布时间】：2012-09-07 02:35:45 【问题描述】：单击 iframe 中的任意位置时，我希望我的父页面滚动到该 iframe 底部下方的位置。但无论我在此处设置的偏移量有多大，父级只会滚动直到 iframe 的底部与视口的底部对齐 - 不会再远了。我怎样才能让它滚动超出这个范围？
$('#iframe1').click(function ()
$('html,body', window.parent.document).animate(
scrollTop: '+=' + 700 + 'px'
, 'fast');
);
【问题讨论】：
【参考方案1】：根据我的测试，在我测试过的所有四种浏览器（Firefox、IE、Chrome 和 Safari）中都可以找到以下作品：
主页：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Main Page</title>
</head>
<body>
<iframe src="iframe.html" style="width:400px; height:500px;"></iframe>
<div style="width: 200px;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam,
pharetra at aliquam sed, luctus vel augue. Donec nec hendrerit velit. Sed
fermentum volutpat libero a viverra. Mauris gravida cursus pulvinar. Morbi lorem
nunc, pretium ut sollicitudin vel, facilisis ac ligula. Vestibulum imperdiet
luctus augue, id euismod diam posuere ut. Suspendisse commodo ante nec dui
suscipit ullamcorper porta justo consequat. Sed et eleifend erat. Duis ornare,
nisi id hendrerit commodo, mauris metus dapibus arcu, ac tempor arcu justo sed
arcu. Sed elementum ornare dolor, ac malesuada est vulputate non. Etiam nisl
sapien, vestibulum ut blandit sed, suscipit vel erat. Sed elementum orci vitae
magna vulputate consequat at ac lorem. Aenean libero risus, ornare sed posuere
vitae, molestie vitae elit.
</p>
<p>
Nullam nec lorem id turpis iaculis pretium. Pellentesque quam libero, pulvinar
vitae viverra at, tincidunt vel dui. Mauris libero nibh, posuere eget aliquet
eget, fermentum nec mi. Cras at venenatis ipsum. Fusce sed fermentum ante. Nam
varius quam in lectus dignissim consequat. Cras semper, ligula eu ullamcorper
pulvinar, orci quam vulputate lorem, vel dignissim lectus ipsum a justo. Etiam
nibh nisi, tristique sit amet adipiscing in, volutpat non dolor. Etiam eros mi,
consectetur sed adipiscing ut, egestas vel mauris. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Donec lacus
leo, feugiat ac lacinia ac, aliquam quis ante. In eleifend gravida lectus, vitae
rhoncus erat sagittis quis. In in nibh at risus faucibus dignissim.
</p>
</div>
</body>
</html>
iframe 内容：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>iframe Page</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
/// wait till document ready
$(function()
/// target the entire iframe page for a click
$('body').click(function ()
/// step back to the parent window and tell it to animate scroll
$('html,body', window.parent.document).animate(
scrollTop: '+=700px'
, 'fast');
);
)
</script>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam,
pharetra at aliquam sed, luctus vel augue. Donec nec hendrerit velit. Sed
fermentum volutpat libero a viverra. Mauris gravida cursus pulvinar. Morbi lorem
nunc, pretium ut sollicitudin vel, facilisis ac ligula. Vestibulum imperdiet
luctus augue, id euismod diam posuere ut. Suspendisse commodo ante nec dui
suscipit ullamcorper porta justo consequat. Sed et eleifend erat. Duis ornare,
nisi id hendrerit commodo, mauris metus dapibus arcu, ac tempor arcu justo sed
arcu. Sed elementum ornare dolor, ac malesuada est vulputate non. Etiam nisl
sapien, vestibulum ut blandit sed, suscipit vel erat. Sed elementum orci vitae
magna vulputate consequat at ac lorem. Aenean libero risus, ornare sed posuere
vitae, molestie vitae elit.
</p>
</body>
</html>
根据上述情况，我没有遇到任何问题，因此我只能假设您的页面设置中存在导致问题的原因。我不确定你的代码是如何通过直接在 iframe 本身上放置一个“点击”处理程序来工作的（这在我的任何测试中都不起作用）所以它可能是你有另一个点击功能在其他地方被触发并且没有像您期望的那样滚动页面？或者它可能是浮动或位置问题（关于你的 iframe），但如果你说你可以手动滚动到正确的位置，那么我怀疑这是一个原因。
【讨论】：
iframe 下方的页面还有更多内容。我可以手动滚动到所需的位置。 如果没有在您的问题中添加一些代码和标记，恐怕很难说出发生了什么。 实际上，可能是因为您同时滚动了 html 和 body ？虽然其中一种适用于不同的浏览器，但它可能会导致一些奇怪的事情发生。如果你只使用“body”会发生什么？ 似乎对我有用...我在 iframe 中单击的任何项目（主要是图像）都会滚动到外部页面的底部（在 Firefox/Windows 7 上）。 iframe 的某些区域不可点击，因为 iframe 中的几乎每个元素都是绝对定位的。这意味着您的 body 元素会折叠成穿过框架顶部的细线。要解决此问题，您应该能够将$('body').click(function () 更改为 $('html').click(function () - 但是我建议您更改布局，这样它就不会过于依赖绝对位置。我无法重现滚动问题
我还建议去掉你身体标签上的绝对位置（加上高度：1000px），因为这会导致出现双滚动条，这也会混淆你的滚动。原因是一些浏览器在 BODY 标签上处理滚动，而其他浏览器在 HTML 标签上处理滚动。不幸的是，尝试修改这些元素的溢出或定位总是会导致问题。哦，而且您的 js 中似乎在 $("#step1img").fadeIn(700);step2text 附近也有一个引用错误，看起来 step2text 不应该在那里。【参考方案2】：
我发现的最简单的解决方案是修改您的 iframe html 以包含 onload="window.parent.parent.scrollTo(0,0)" ，如下例所示：
<iframe src="https://myiframe.com" onload="window.parent.parent.scrollTo(0,0)" />
【讨论】：
以上是关于点击 iframe → 父窗口滚动到位置？的主要内容，如果未能解决你的问题，请参考以下文章