J'ai trouvé un moyen qui utilise JS, mais je préfère utiliser CSS, que je pense avoir vu utilisé auparavant, mais je ne me souviens pas comment. Je quel type de CSS j'utiliserais pour positionner la page Web à l'intérieur et iframe?Comment défiler vers un emplacement spécifique dans un iframe?
Créez un anchor dans votre iframe: <a id="aBottom"/>. Maintenant, nous aurons besoin anchor que nous avons ajouté dans votre iframe et obtenir anchor « s offsetTop:
var position = window.frames["anchor_iframe"].document.getElementById("aBottom").offsetTop;
Maintenant, définissez votre iframescrollTop avec position
window.frames["anchor_iframe"].document.body.scrollTop = position;
iframe-défilement à l'ancre -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>
Si vous avez seulement besoin de le faire sur le même domaine, vous pouvez utiliser ce qui suit ... domaine Cross violera de même politique de domaine js .:
Vous attendez le document pour terminer le chargement (pour obtenir le iframe ref) alors attendez que l'iframe ait fini de charger (pour que vous puissiez faire défiler sans interférence), alors vous utilisez la fonction scrollTo. Si vous voulez un meilleur moyen d'ajouter les événements onload, jquery fournit une implémentation plus complète que je vous conseille d'utiliser.
Mais si vous faites cela, vous allez charger toute la page yahoo (même les publicités), juste pour montrer une petite section, peu importe le fait que chaque fois que Yahoo change de mise en page, vous devrez ajuster le recadrage et le reste de votre page ... ne pourriez-vous pas simplement utiliser l'un des their rss news feeds à la place?
J'utilise deux domaines différents. Ce que j'essaye de faire est de créer une page d'accueil avec mon email, nouvelles, fb, temps, etc. tout dans un endroit, et j'aime vraiment les nouvelles de Yahoo! Celui qui est titres "Aujourd'hui" sur leur page d'accueil. Donc ce que j'essaie de faire, c'est d'avoir un iframe pour yahoo.com, et j'ai besoin de le faire défiler pour que le module d'aujourd'hui soit la seule chose visible. Malheureusement, je ne trouve pas d'API pour le module "Aujourd'hui", c'est donc ma seule option. – Sean
Eh bien, ce n'est pas exactement ce que vous voulez entendre, mais vous pouvez toujours utiliser RSS? Ensuite, vous pouvez simplement utiliser un gadget Google pour intégrer le flux sur la page. Pour ce faire, il vous suffit de le faire http://www.labnol.org/internet/tools/embed-rss-feeds-add-html-websites-javascript/2515/ –