web-dev-qa-db-fra.com

Faire défiler une iframe avec JavaScript?

Je charge dynamiquement une iframe avec JavaScript. Après le chargement, comment puis-je faire défiler un nombre spécifique de pixels vers le bas (c.-à-d. Une fois que la page dans l'iframe a été chargée, comment puis-je le faire défiler lui-même jusqu'à la région spécifiée de la page?)

javascriptiframescroll
45
rawrrrrrrrr

Vous pouvez utiliser l'événement onload pour détecter la fin du chargement de l'iframe. Vous pouvez également utiliser la fonction scrollTo de la fenêtre contentWindow de l'iframe, pour faire défiler l'écran jusqu'à une position définie de y):

var myIframe = document.getElementById('iframe');
myIframe.onload = function () {
    myIframe.contentWindow.scrollTo(xcoord,ycoord);
}

Vous pouvez consulter un exemple de travail ici .

Remarque: Ceci fonctionnera si les deux pages résident sur le même domaine.

42
CMS

Inspiré par le commentaire de Nelson, j'ai fait ceci.

Solution de contournement pour la stratégie javascript de même origine en ce qui concerne l'utilisation de .ScrollTo () sur un document provenant d'un domaine externe.

Une solution très simple consiste à créer une page HTML factice qui héberge le site Web externe qu’elle contient, puis à appeler .ScrollTo (x, y) sur cette page une fois chargée. Ensuite, la seule chose à faire est de disposer d’un cadre ou d’un iframe pour afficher ce site Web.

Il y a beaucoup d'autres façons de le faire, c'est de loin le moyen le plus simplifié de le faire.

* notez que la hauteur doit être grande pour accepter la valeur maximale des barres de défilement.

--home.htm

<html>
<head>
<title>Home</title>
</head>

<frameset rows="*,170">
<frame src=body.htm noresize=yes frameborder=0 marginheight=0 marginwidth=0 scrolling=no>
<frame src="weather.htm" noresize=yes frameborder=0 marginheight=0 marginwidth=0 scrolling=no>
</frameset>
</html>

--weather.htm

<html>
<head>
<title>Weather</title>
</head>

<body onLoad="window.scrollTo(0,170)">

<iframe id="iframe" src="http://forecast.weather.gov/MapClick.php?CityName=Las+Vegas&state=NV&site=VEF&textField1=36.175&textField2=-115.136&e=0" height=1000 width=100% frameborder=0 marginheight=0 marginwidth=0 scrolling=no>
</iframe>

</body>
</html>
19
Greg

Inspiré par les commentaires de Nelson et Chris , j'ai trouvé un moyen de contourner la même politique d'origine avec un div et un iframe:

HTML:

<div id='div_iframe'><iframe id='frame' src='...'></iframe></div>

CSS:

#div_iframe {
  border-style: inset;
  border-color: grey;
  overflow: scroll;
  height: 500px;
  width: 90%
}

#frame {
  width: 100%;
  height: 1000%;   /* 10x the div height to embrace the whole page */
}

Supposons maintenant que je veuille ignorer les 438 premiers pixels (verticaux) de la page iframe, en les faisant défiler jusqu'à cette position.

Solution JS:

document.getElementById('div_iframe').scrollTop = 438

Solution JQuery:

$('#div_iframe').scrollTop(438)

Solution CSS:

#frame { margin-top: -438px }

(Chaque solution à elle seule suffit et l’effet de la solution CSS est un peu différent car vous ne pouvez pas faire défiler vers le haut pour voir le haut de la page iframed.)

12
Sony Santos

Utilisez la propriété scrollTop du contenu du cadre pour définir le décalage de défilement vertical du contenu sur un nombre spécifique de pixels (comme 100):

<iframe src="foo.html" onload="this.contentWindow.document.documentElement.scrollTop=100"></iframe>
3
Justin Ludwig

Une solution jQuery:

$("#frame1").ready( function() {

  $("#frame1").contents().scrollTop( $("#frame1").contents().scrollTop() + 10 );

});
2
Steve Claridge

Ou bien, vous pouvez définir une marge supérieure sur l'iframe ... un peu bidouillé mais fonctionnant jusqu'ici en FF 

#frame {
margin-top:200px;
}
0
mostlyliquid

J'ai également eu du mal à utiliser n'importe quel type de fonction "scrollTo" en javascript dans un iframe sur un iPad. Enfin trouvé une "ancienne" solution au problème, il suffit de hacher une ancre.

Dans ma situation, après un retour ajax, mes messages d'erreur étaient configurés pour s'afficher en haut de l'iframe, mais si l'utilisateur avait fait défiler l'écran sous une forme relativement longue, la soumission disparaissait et l'erreur apparaissait "au-dessus du pli". De plus, en supposant que l'utilisateur ait fait défiler la page de niveau supérieur vers le bas, 0,0 s'est écoulé et a également été masqué.

J'ai ajouté

<a name="ptop"></a>

au sommet de mon document iframe et

<a name="atop"></a>

au sommet de ma page de niveau supérieur

puis

    $(document).ready(function(){
      $("form").bind("ajax:complete",
        function() {
          location.hash = "#";
          top.location.hash = "#";
          setTimeout('location.hash="#ptop"',150);
          setTimeout('top.location.hash="#atop"',350);
        }
      )
    });

dans l'iframe.

Vous devez hacher l'iframe avant le début de la page, sinon seul l'iframe défilera et le haut restera masqué, mais, même s'il est un peu "instable" en raison des intervalles de temporisation, cela fonctionne. J'imagine que les balises permettraient différents points "scrollTo".

0
G. Andrews