iframe en bas de la page: évite le défilement automatique de la page

J'ai un iframe à partir du milieu vers le bas sur une page. Lorsque je charge la page défile vers le bas. J'ai essayé de body onload window.scroll(0,0) mais il ne fait pas moche effet, car il va d'abord vers le bas, puis immédiatement défiler vers le haut.

Ce qui est la cause de ce défilement automatique vers le bas avec iframe sur la page?

source d'informationauteur smepie

  1. 27

    C'est juste un hasard, mais c'est possible de faire quelque chose comme ceci:

    <iframe style="display: none;" onload="this.style.display='block';" href="..."></iframe>

    L'être pensant que si c'est un vol de focus script sur une page que vous ne pouvez pas contrôler, le navigateur ne sera pas concentrer un élément masqué. Et il y a une bonne probabilité que votre onload se déclenche après leur attention à la modification de script.

    Ou d'une autre option qui pourrait être un peu plus fiable:

    <iframe style="position: absolute; top: -9999em; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" href="..."></iframe>

    Ici, nous sommes fondamentalement en disant masquage de l'image et de l'amener à un décalage négatif sur la page verticalement. Quand il ne l'essayez de vous concentrer sur l'élément à l'intérieur du cadre, il doit faire défiler la page vers le haut, puis une fois chargé place de l'iframe pour revenir dans la position prévue.

    Bien sûr, sans en savoir plus, il est difficile de dire qui ils sont d'accord, et ces deux options ont des conditions qui sont un peu racé, donc YMMV.

    J'espère que cela aide 🙂

  2. 2

    Simple. Utilisation about:blank dans src comme

    <iframe id="idName" name="idName" src="about:blank" style="display:none"></iframe>
  3. 0

    Méthode similaire, mais en utilisant des classes.. j'ai ajouté une classe à l'iFrame du div parent de "iframe_display" avec un style à l'intérieur de l'visibility: hidden. Au chargement de la page j'ai ensuite utilisé jQuery pour supprimer la classe

    .iframe_display{visibility:hidden}

$(function(){
    $('#iframe_wrapper').removeClass('iframe_display');
});

    Cela prend le focus de l'iFrame et arrête le défilement vers le bas pour l'iFrame sur la page de la charge

  4. 0

    La src="about:blank" astuce fournie par Leandro & édité par Spokey a fonctionné pour moi, mais j'aimerais partager avec vous une solution de contournement que j'utilisais avant.

    Une solution temporaire que j'ai trouvé était à intégrer l'iframe dans la partie supérieure de l'élément sur ma page (nav, header etc), de sorte que même si le navigateur veut sauter à se concentrer, il "sauts" à l'élément supérieur. Ce ne peut toujours causer un légèrement perceptible saut, ce qui pourrait vous embêter.

    Assurez-vous que l'iframe reste caché si vous choisissez de le placer près de la haut de la page, j'ai appliqué un style en ligne de style="visibility:hidden; height: 0px; width: 0px;". Je suppose que vous pourriez aussi utiliser un z-index combo.

  5. 0

    Cela semble bien fonctionner:

    <iframe src="http://iframe-source.com" onLoad="self.scrollTo(0,0)"></iframe>
  6. 0

    Je suis venu avec un "hack" qui fonctionne bien. Utilisez cette option si vous ne voulez pas que votre page web pour faire défiler n'importe où sauf le haut:

    //prevent scrollTo() from jumping to iframes
var originalScrollTo = window.scrollTo;

window.scrollTo = function scrollTo (x, y) {
  if (y === 0) {
    originalScrollTo.call(this, x, y);
  }
}

    Si vous souhaitez désactiver le défilement automatique complètement, juste pour redéfinir la fonction à un no-op:

    window.scrollTo = function () {};
  7. 0

    C'est la solution que j'ai trouvé et testé dans Chrome.

    Nous avons une iframe enveloppé par un élément div. Garder court, j'ai supprimé les noms de classe liées à la taille de l'iframe. Ici, le point est onMyFrameLoad fonction sera appelée lors de l'iframe est complètement chargé.

    <div class="...">
    <iframe onload="onMyFrameLoad()" class="..." src="..."></iframe>
</div>

    Ensuite dans votre fichier js, vous avez besoin de cela,

    function noscroll() {
  window.scrollTo(0, 0);
}
//add listener to disable scroll
window.addEventListener('scroll', noscroll);
function onMyFrameLoad() {
  setTimeout(function () {
    //Remove the scroll disabling listener (to enable scrolling again)
    window.removeEventListener('scroll', noscroll);
  }, 1000);
}

    De cette façon, tous les événements de défilement devenir inefficace jusqu'à iframe est chargé.
    Après l'iframe est chargé, nous nous attendre 1 sec pour s'assurer que tous les événements de défilement (à partir d'une iframe) sont annulées consommée.
    Ce n'est pas un moyen idéal pour résoudre votre problème si votre source iframe est lente. Ensuite, vous devez attendre plus longtemps en augmentant le temps d'attente en fonction setTimeout.

    J'ai obtenu le concept initial de https://davidwells.io/snippets/disable-scrolling-with-javascript/