如何滚动到 iframe 中的特定位置？答案

【问题标题】：How do I scroll to s specific location in an iframe?如何滚动到 iframe 中的特定位置？
【发布时间】：2010-11-16 16:02:39
【问题描述】：

我找到了一种使用 JS 的方法，但我更愿意使用 CSS，我想我以前见过用过，但我不记得怎么用了。我将使用哪种 CSS 来定位网页和 iframe？

【问题讨论】：

标签： javascript html css iframe

【解决方案1】：

如果只需要在同一个域上做，可以使用如下...跨域会违反js的同域策略：

您等待文档完成加载（以获取 iframe ref），然后等待 iframe 完成加载（以便您可以不受干扰地滚动），然后使用 scrollTo 函数。

document.onLoad = function() {
   var iframeEle = document.getElementById('iframeId').
   iframeEle.onLoad = function() {
      iframeEle.scrollTo(xCoord, yCoord);
   }
}

如果您想要一种更好的方法来添加 onload 事件，jquery 提供了一个更完整的实现，我建议您使用它。

【讨论】：

我正在使用两个不同的域。我想做的是在一个地方创建一个主页，其中包含我的电子邮件、新闻、fb、天气等，我真的很喜欢 Yahoo! 的新闻。在他们的主页上标题为“今天”的那个。所以我想做的是我有一个 yahoo.com 的 iframe，我需要滚动它，以便今天的模块是唯一可见的。遗憾的是，我找不到“今日”模块的 API，所以这是我唯一的选择。
嗯，这不是您想听到的，但您总是可以使用 RSS？然后，您可以使用谷歌小工具在页面上嵌入提要。为此，您只需这样做labnol.org/internet/tools/…

【解决方案2】：

但是，如果您这样做，您将加载整个 yahoo 页面（甚至是广告），只是为了显示一小部分，更不用说每次 yahoo 更改布局时，您都必须调整裁剪和其余部分您的页面...您不能只使用their rss news feeds 之一吗？

【讨论】：

【解决方案3】：

在您的iframe 中创建一个anchor：<a id="aBottom"/>。现在，我们将需要我们在您的iframe 中添加的anchor 并获取anchor 的offsetTop：

var position = window.frames["anchor_iframe"].document.getElementById("aBottom").offsetTop;

现在，将您的 iframe scrollTop 设置为 position

window.frames["anchor_iframe"].document.body.scrollTop = position;

iframe-scroll-to-anchor-position.htm

<html>
<head>
 <script type="text/javascript">
  function getThere() {
      var position = window.frames[0].document.getElementById("aBottom").offsetTop;
      window.frames[0].document.body.scrollTop = position;
  }
 </script>
</head>
<body>
<button onclick="getThere();">Get me there!</button>
<br/>
<iframe src="loremipsum.htm" width="80%" height="510"> </iframe> 
</body>
</html>

loremipsum.htm

<html>
<body>

<p>


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor rutrum neque, id tincidunt dolor euismod eget. Sed eget dui lectus, in scelerisque est. Cras in elit leo, ut egestas ante. Sed pharetra nisl quis tortor blandit ut aliquam massa euismod. Donec et dictum diam. Nam mollis libero eget quam dignissim eu viverra libero adipiscing. Sed tempor, metus semper pellentesque rutrum, ipsum mi molestie ipsum, sed viverra libero neque et velit. Fusce pulvinar erat non nisl suscipit sagittis. Nam commodo purus in velit luctus congue. Nam tincidunt congue eleifend. Donec ut mauris quis eros ullamcorper aliquam. Maecenas sit amet ligula quis lectus condimentum dictum. Donec sit amet nisi ac ante pellentesque gravida. Nulla interdum metus faucibus neque molestie cursus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor rutrum neque, id tincidunt dolor euismod eget. Sed eget dui lectus, in scelerisque est. Cras in elit leo, ut egestas ante. Sed pharetra nisl quis tortor blandit ut aliquam massa euismod. Donec et dictum diam. Nam mollis libero eget quam dignissim eu viverra libero adipiscing. Sed tempor, metus semper pellentesque rutrum, ipsum mi molestie ipsum, sed viverra libero neque et velit. Fusce pulvinar erat non nisl suscipit sagittis. Nam commodo purus in velit luctus congue. Nam tincidunt congue eleifend. Donec ut mauris quis eros ullamcorper aliquam. Maecenas sit amet ligula quis lectus condimentum dictum. Donec sit amet nisi ac ante pellentesque gravida. Nulla interdum metus faucibus neque molestie cursus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor rutrum neque, id tincidunt dolor euismod eget. Sed eget dui lectus, in scelerisque est. Cras in elit leo, ut egestas ante. Sed pharetra nisl quis tortor blandit ut aliquam massa euismod. Donec et dictum diam. Nam mollis libero eget quam dignissim eu viverra libero adipiscing. Sed tempor, metus semper pellentesque rutrum, ipsum mi molestie ipsum, sed viverra libero neque et velit. Fusce pulvinar erat non nisl suscipit sagittis. Nam commodo purus in velit luctus congue. Nam tincidunt congue eleifend. Donec ut mauris quis eros ullamcorper aliquam. Maecenas sit amet ligula quis lectus condimentum dictum. Donec sit amet nisi ac ante pellentesque gravida. Nulla interdum metus faucibus neque molestie cursus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor rutrum neque, id tincidunt dolor euismod eget. Sed eget dui lectus, in scelerisque est. Cras in elit leo, ut egestas ante. Sed pharetra nisl quis tortor blandit ut aliquam massa euismod. Donec et dictum diam. Nam mollis libero eget quam dignissim eu viverra libero adipiscing. Sed tempor, metus semper pellentesque rutrum, ipsum mi molestie ipsum, sed viverra libero neque et velit. Fusce pulvinar erat non nisl suscipit sagittis. Nam commodo purus in velit luctus congue. Nam tincidunt congue eleifend. Donec ut mauris quis eros ullamcorper aliquam. Maecenas sit amet ligula quis lectus condimentum dictum. Donec sit amet nisi ac ante pellentesque gravida. Nulla interdum metus faucibus neque molestie cursus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor rutrum neque, id tincidunt dolor euismod eget. Sed eget dui lectus, in scelerisque est. Cras in elit leo, ut egestas ante. Sed pharetra nisl quis tortor blandit ut aliquam massa euismod. Donec et dictum diam. Nam mollis libero eget quam dignissim eu viverra libero adipiscing. Sed tempor, metus semper pellentesque rutrum, ipsum mi molestie ipsum, sed viverra libero neque et velit. Fusce pulvinar erat non nisl suscipit sagittis. Nam commodo purus in velit luctus congue. Nam tincidunt congue eleifend. Donec ut mauris quis eros ullamcorper aliquam. Maecenas sit amet ligula quis lectus condimentum dictum. Donec sit amet nisi ac ante pellentesque gravida. Nulla interdum metus faucibus neque molestie cursus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor rutrum neque, id tincidunt dolor euismod eget. Sed eget dui lectus, in scelerisque est. Cras in elit leo, ut egestas ante. Sed pharetra nisl quis tortor blandit ut aliquam massa euismod. Donec et dictum diam. Nam mollis libero eget quam dignissim eu viverra libero adipiscing. Sed tempor, metus semper pellentesque rutrum, ipsum mi molestie ipsum, sed viverra libero neque et velit. Fusce pulvinar erat non nisl suscipit sagittis. Nam commodo purus in velit luctus congue. Nam tincidunt congue eleifend. Donec ut mauris quis eros ullamcorper aliquam. Maecenas sit amet ligula quis lectus condimentum dictum. Donec sit amet nisi ac ante pellentesque gravida. Nulla interdum metus faucibus neque molestie cursus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor rutrum neque, id tincidunt dolor euismod eget. Sed eget dui lectus, in scelerisque est. Cras in elit leo, ut egestas ante. Sed pharetra nisl quis tortor blandit ut aliquam massa euismod. Donec et dictum diam. Nam mollis libero eget quam dignissim eu viverra libero adipiscing. Sed tempor, metus semper pellentesque rutrum, ipsum mi molestie ipsum, sed viverra libero neque et velit. Fusce pulvinar erat non nisl suscipit sagittis. Nam commodo purus in velit luctus congue. Nam tincidunt congue eleifend. Donec ut mauris quis eros ullamcorper aliquam. Maecenas sit amet ligula quis lectus condimentum dictum. Donec sit amet nisi ac ante pellentesque gravida. Nulla interdum metus faucibus neque molestie cursus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor rutrum neque, id tincidunt dolor euismod eget. Sed eget dui lectus, in scelerisque est. Cras in elit leo, ut egestas ante. Sed pharetra nisl quis tortor blandit ut aliquam massa euismod. Donec et dictum diam. Nam mollis libero eget quam dignissim eu viverra libero adipiscing. Sed tempor, metus semper pellentesque rutrum, ipsum mi molestie ipsum, sed viverra libero neque et velit. Fusce pulvinar erat non nisl suscipit sagittis. Nam commodo purus in velit luctus congue. Nam tincidunt congue eleifend. Donec ut mauris quis eros ullamcorper aliquam. Maecenas sit amet ligula quis lectus condimentum dictum. Donec sit amet nisi ac ante pellentesque gravida. Nulla interdum metus faucibus neque molestie cursus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor rutrum neque, id tincidunt dolor euismod eget. Sed eget dui lectus, in scelerisque est. Cras in elit leo, ut egestas ante. Sed pharetra nisl quis tortor blandit ut aliquam massa euismod. Donec et dictum diam. Nam mollis libero eget quam dignissim eu viverra libero adipiscing. Sed tempor, metus semper pellentesque rutrum, ipsum mi molestie ipsum, sed viverra libero neque et velit. Fusce pulvinar erat non nisl suscipit sagittis. Nam commodo purus in velit luctus congue. Nam tincidunt congue eleifend. Donec ut mauris quis eros ullamcorper aliquam. Maecenas sit amet ligula quis lectus condimentum dictum. Donec sit amet nisi ac ante pellentesque gravida. Nulla interdum metus faucibus neque molestie cursus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor rutrum neque, id tincidunt dolor euismod eget. Sed eget dui lectus, in scelerisque est. Cras in elit leo, ut egestas ante. Sed pharetra nisl quis tortor blandit ut aliquam massa euismod. Donec et dictum diam. Nam mollis libero eget quam dignissim eu viverra libero adipiscing. Sed tempor, metus semper pellentesque rutrum, ipsum mi molestie ipsum, sed viverra libero neque et velit. Fusce pulvinar erat non nisl suscipit sagittis. Nam commodo purus in velit luctus congue. Nam tincidunt congue eleifend. Donec ut mauris quis eros ullamcorper aliquam. Maecenas sit amet ligula quis lectus condimentum dictum. Donec sit amet nisi ac ante pellentesque gravida. Nulla interdum metus faucibus neque molestie cursus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor rutrum neque, id tincidunt dolor euismod eget. Sed eget dui lectus, in scelerisque est. Cras in elit leo, ut egestas ante. Sed pharetra nisl quis tortor blandit ut aliquam massa euismod. Donec et dictum diam. Nam mollis libero eget quam dignissim eu viverra libero adipiscing. Sed tempor, metus semper pellentesque rutrum, ipsum mi molestie ipsum, sed viverra libero neque et velit. Fusce pulvinar erat non nisl suscipit sagittis. Nam commodo purus in velit luctus congue. Nam tincidunt congue eleifend. Donec ut mauris quis eros ullamcorper aliquam. Maecenas sit amet ligula quis lectus condimentum dictum. Donec sit amet nisi ac ante pellentesque gravida. Nulla interdum metus faucibus neque molestie cursus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor rutrum neque, id tincidunt dolor euismod eget. Sed eget dui lectus, in scelerisque est. Cras in elit leo, ut egestas ante. Sed pharetra nisl quis tortor blandit ut aliquam massa euismod. Donec et dictum diam. Nam mollis libero eget quam dignissim eu viverra libero adipiscing. Sed tempor, metus semper pellentesque rutrum, ipsum mi molestie ipsum, sed viverra libero neque et velit. Fusce pulvinar erat non nisl suscipit sagittis. Nam commodo purus in velit luctus congue. Nam tincidunt congue eleifend. Donec ut mauris quis eros ullamcorper aliquam. Maecenas sit amet ligula quis lectus condimentum dictum. Donec sit amet nisi ac ante pellentesque gravida. Nulla interdum metus faucibus neque molestie cursus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor rutrum neque, id tincidunt dolor euismod eget. Sed eget dui lectus, in scelerisque est. Cras in elit leo, ut egestas ante. Sed pharetra nisl quis tortor blandit ut aliquam massa euismod. Donec et dictum diam. Nam mollis libero eget quam dignissim eu viverra libero adipiscing. Sed tempor, metus semper pellentesque rutrum, ipsum mi molestie ipsum, sed viverra libero neque et velit. Fusce pulvinar erat non nisl suscipit sagittis. Nam commodo purus in velit luctus congue. Nam tincidunt congue eleifend. Donec ut mauris quis eros ullamcorper aliquam. Maecenas sit amet ligula quis lectus condimentum dictum. Donec sit amet nisi ac ante pellentesque gravida. Nulla interdum metus faucibus neque molestie cursus.

<br/><br/><br/><a id="aBottom" style="background:red;">can you see me!</a><br/><br/><br/>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor rutrum neque, id tincidunt dolor euismod eget. Sed eget dui lectus, in scelerisque est. Cras in elit leo, ut egestas ante. Sed pharetra nisl quis tortor blandit ut aliquam massa euismod. Donec et dictum diam. Nam mollis libero eget quam dignissim eu viverra libero adipiscing. Sed tempor, metus semper pellentesque rutrum, ipsum mi molestie ipsum, sed viverra libero neque et velit. Fusce pulvinar erat non nisl suscipit sagittis. Nam commodo purus in velit luctus congue. Nam tincidunt congue eleifend. Donec ut mauris quis eros ullamcorper aliquam. Maecenas sit amet ligula quis lectus condimentum dictum. Donec sit amet nisi ac ante pellentesque gravida. Nulla interdum metus faucibus neque molestie cursus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor rutrum neque, id tincidunt dolor euismod eget. Sed eget dui lectus, in scelerisque est. Cras in elit leo, ut egestas ante. Sed pharetra nisl quis tortor blandit ut aliquam massa euismod. Donec et dictum diam. Nam mollis libero eget quam dignissim eu viverra libero adipiscing. Sed tempor, metus semper pellentesque rutrum, ipsum mi molestie ipsum, sed viverra libero neque et velit. Fusce pulvinar erat non nisl suscipit sagittis. Nam commodo purus in velit luctus congue. Nam tincidunt congue eleifend. Donec ut mauris quis eros ullamcorper aliquam. Maecenas sit amet ligula quis lectus condimentum dictum. Donec sit amet nisi ac ante pellentesque gravida. Nulla interdum metus faucibus neque molestie cursus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempor rutrum neque, id tincidunt dolor euismod eget. Sed eget dui lectus, in scelerisque est. Cras in elit leo, ut egestas ante. Sed pharetra nisl quis tortor blandit ut aliquam massa euismod. Donec et dictum diam. Nam mollis libero eget quam dignissim eu viverra libero adipiscing. Sed tempor, metus semper pellentesque rutrum, ipsum mi molestie ipsum, sed viverra libero neque et velit. Fusce pulvinar erat non nisl suscipit sagittis. Nam commodo purus in velit luctus congue. Nam tincidunt congue eleifend. Donec ut mauris quis eros ullamcorper aliquam. Maecenas sit amet ligula quis lectus condimentum dictum. Donec sit amet nisi ac ante pellentesque gravida. Nulla interdum metus faucibus neque molestie cursus.
</p>
</body>
</html>

【讨论】：