Fatal编程技术网
  • jquery/
  • Jquery 单击iframe→；父窗口是否滚动到位置？

Jquery 单击iframe→；父窗口是否滚动到位置？

jquery iframe scroll

Jquery 单击iframe→；父窗口是否滚动到位置？,jquery,iframe,scroll,jquery-animate,Jquery,Iframe,Scroll,Jquery Animate,单击iframe中的任意位置，我希望我的父页面滚动到该iframe底部下方的位置。但是，无论我在这里为偏移量设置了多大的数字，父对象只会滚动，直到iframe的底部与视口的底部对齐为止——不再滚动。我怎样才能让它滚动超过这个范围 $('#iframe1').click(function () { $('html,body', window.parent.document).animate({ scrollTop: '+=' + 700 + 'px' }, 'fas

单击iframe中的任意位置，我希望我的父页面滚动到该iframe底部下方的位置。但是，无论我在这里为偏移量设置了多大的数字，父对象只会滚动，直到iframe的底部与视口的底部对齐为止——不再滚动。我怎样才能让它滚动超过这个范围

$('#iframe1').click(function () {
    $('html,body', window.parent.document).animate({
        scrollTop: '+=' + 700 + 'px'
    }, 'fast');
});
从我的测试中，我在测试过的四种浏览器（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>

<!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>


主页

Lorem ipsum dolor sit amet，是一位杰出的献身者。整数enim直径，
阿利夸姆赛德的法雷特拉，卢克图斯·维尔·奥古斯。Donec nec hendrerit velit。塞德
发酵剂是一种活菌。毛里斯孕妇丘疹。莫比勒姆
努克语，前语和前语，前语和前语。前庭闭锁
卢克图斯·奥古斯，我是尤伊斯莫·迪亚姆·波苏尔。因酒后驾车而导致的公共交通暂停
这是一个很好的解决方案。塞德和埃利芬德·埃拉特。杜伊斯·奥纳雷，
nisi id hendrerit commodo，mauris metus dapibus arcu，ac临时arcu，仅适用于
阿库。这是一种不可替代的元素。伊蒂亚姆尼索
智者，前庭和文雅，支持水平。虎耳草素
ac lorem的magna vulputate consequat。埃涅亚自由主义者，奥纳·塞德·波苏尔
vitae，molestie vitae Elite。



未经许可，不得使用未经许可的turpis iaculis pretium。普尔维纳尔自由广场
维韦拉之家，酒后驾车。莫里斯·利伯罗·尼布，波苏尔·埃吉特·阿利奎特
埃吉特，发酵液。位于同侧腓肠肌的CRA。发酵前的熔丝。不结盟运动
华莱士·奎姆（varius quam）是一位尊贵的顾问。克拉斯·森佩尔，利古拉·尤拉姆科珀
pulvinar，orci quam vulpute lorem，vel dignessis lectus ipsum a justo。艾蒂安
尼布·尼西，崔斯蒂克坐在阿梅特的座位上，坐在那里，没有多洛。埃蒂亚姆·厄罗斯·米，
圣塔德图是一个圣塔，它的名字叫艾格斯塔斯·维尔·莫里斯（egestas vel mauris）。佩伦茨克居民莫尔比
这是一个非常有名的地方。多奈克拉库斯
利奥，封建主义者，拉齐尼亚，阿利奎姆·奎斯·安特。在eleifend妊娠期，vitae
弓形菱形肌。在nibh的risus faucibus Dignessim。
iframe内容：

<!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>

<!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页面进行单击
$（'body'）。单击（函数（）{
///返回到父窗口并告诉它设置滚动动画
$（'html，body'，window.parent.document）.动画({
滚动顶部：'+=700px'
}“快”）；
});
})

Lorem ipsum dolor sit amet，是一位杰出的献身者。整数enim直径，
阿利夸姆赛德的法雷特拉，卢克图斯·维尔·奥古斯。Donec nec hendrerit velit。塞德
发酵剂是一种活菌。毛里斯孕妇丘疹。莫比勒姆
努克语，前语和前语，前语和前语。前庭闭锁
卢克图斯·奥古斯，我是尤伊斯莫·迪亚姆·波苏尔。因酒后驾车而导致的公共交通暂停
这是一个很好的解决方案。塞德和埃利芬德·埃拉特。杜伊斯·奥纳雷，
nisi id hendrerit commodo，mauris metus dapibus arcu，ac临时arcu，仅适用于
阿库。这是一种不可替代的元素。伊蒂亚姆尼索
智者，前庭和文雅，支持水平。虎耳草素
ac lorem的magna vulputate consequat。埃涅亚自由主义者，奥纳·塞德·波苏尔
vitae，molestie vitae Elite。
有了以上内容，我不会遇到任何问题，因此我只能假设您的页面设置中存在导致问题的原因。我不确定通过直接在iframe本身上放置一个“click”处理程序，您的代码是如何工作的（这在我的任何测试中都不起作用），因此您可能在其他地方有另一个被触发的click函数，并且没有像您期望的那样滚动页面？这可能是一个浮动或位置问题（关于您的iframe），但如果您说可以手动滚动到正确的位置，那么我怀疑这是否是原因。

我发现的最简单的解决方案是修改iframe html以包括onload=“window.parent.parent.scrollTo（0,0）”，如本例所示：

<iframe src="https://myiframe.com" width="100%" height="1500px" onload="window.parent.parent.scrollTo(0,0)" />
iframe下面的页面还有更多内容。除此之外，我还可以手动滚动到所需的位置。如果您的问题中没有添加一些代码和标记，恐怕很难判断发生了什么。实际上，可能是因为您同时滚动html和正文？虽然其中一种浏览器适用于不同的浏览器，但这可能会导致一些奇怪的事情发生。。如果你只用“身体”怎么办？似乎对我有用。。。我在iframe中单击的任何项目（主要是图像）都会滚动到外部页面的底部（在Firefox/Windows7上）。iframe的某些区域不可单击，因为iframe中的几乎每个元素都是绝对定位的。。这意味着您的身体元素在框架顶部折叠成一条细线。要解决此问题，您应该能够更改
$（'body'）。单击（function（）{
到
$（'html'）。单击（function（）{
）-但是我建议更改布局，使其不太依赖绝对位置。我不能重现滚动问题，我还建议删除body标记上的绝对位置（加上高度：1000px）因为这会导致出现双滚动条，这也会混淆您的滚动。原因是一些浏览器在BODY标记上处理滚动，而其他浏览器在HTML标记上处理滚动。尝试修改这些元素的溢出或位置总是会导致问题。哦，这是很不幸的因此，您的js中似乎有一个参考错误，位于
$（“#step1img”）.fadeIn（700）；step2text
附近，看起来像
step2