我找到了一种使用JS的方法,但我宁愿使用CSS,我认为我以前见过它,但我不记得怎么做了。我会使用什么样的CSS来定位网页和iframe?
答案 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)
在anchor
:iframe
中创建<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}}