如何滚动到iframe中的特定位置?

时间:2010-11-16 04:17:43

标签: javascript html css iframe

我找到了一种使用JS的方法,但我宁愿使用CSS,我认为我以前见过它,但我不记得怎么做了。我会使用什么样的CSS来定位网页和iframe?

3 个答案:

答案 0 :(得分:1)

如果您只需要在同一个域中执行此操作,则可以使用以下内容...跨域将违反js的相同域策略。

您等待文档完成加载(以获取iframe引用)然后等待iframe完成加载(以便您可以不受干扰地滚动),然后使用scrollTo函数。

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

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

答案 1 :(得分:1)

但是,如果你这样做,你将加载整个雅虎页面(甚至是广告),只是为了显示一小部分,从未明白每次雅虎改变布局的事实,你将不得不调整裁剪和其余你的网页...你不能只使用their rss news feeds之一吗?

答案 2 :(得分:0)

anchoriframe中创建<a id="aBottom"/>。现在,我们需要在anchor中添加iframe anchor并获取var position = window.frames["anchor_iframe"].document.getElementById("aBottom").offsetTop; offsetTop

iframe

现在,将scrollTop position设为window.frames["anchor_iframe"].document.body.scrollTop = position;

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

<强> iframe的滚动到锚position.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>

<强> loremipsum.htm

{{1}}