How do I scroll to s specific location in an iframe?
I have found one way which uses JS, but I would rather use CSS, which I think I had seen us开发者_如何学Ced before, but I cannot remember how. I what kind of CSS would I use to position the webpage inside and iframe?
If you only need to do it on the same domain, you can use the following... Cross domain will violate js's same domain policy.:
You wait for the document to finish loading (to get the iframe ref) then wait for the iframe to finish loading (so that you can scroll without interference), then you use the scrollTo function.
document.onLoad = function() {
var iframeEle = document.getElementById('iframeId').
iframeEle.onLoad = function() {
iframeEle.scrollTo(xCoord, yCoord);
}
}
If you want a better way to add the onload events, jquery provides a more complete implementation which I would advise you use.
But if you do that, you'll be loading the entire yahoo page (even ads), just to show a small section, nevermind the fact that everytime yahoo changes layout, you'll have to adjust the cropping and the rest of your page... couldn't you just use one of their rss news feeds instead?
Create an anchor in your iframe: <a id="aBottom"/>. Now, we will need that anchor that we added in your iframe and get anchor's offsetTop:
var position = window.frames["anchor_iframe"].document.getElementById("aBottom").offsetTop;
Now, set your iframe scrollTop with 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>
加载中,请稍侯......
精彩评论