web-dev-qa-db-fra.com

Comment obtenir le scrollTop d'un iframe

scrollTop de jQuery renvoie la valeur null lorsque window est une iframe. Quelqu'un at-il été capable de comprendre comment obtenir scrollTop d'un iframe?

plus d'informations:

mon script est exécuté dans l'iframe lui-même, la fenêtre parente se trouve sur un autre domaine, je ne peux donc pas accéder à l'ID de l'iframe ou quoi que ce soit du genre.

jqueryiframedimensions
17
mkoryak

Vous pouvez définir scrollTop en utilisant cette configuration:

$("html,body").scrollTop(25);

Donc, vous pouvez essayer de l'obtenir comme ceci:

$("html,body").scrollTop();

Parce que différents navigateurs définissent la scrollTop sur différents éléments (body ou html).

Depuis le plugin scrollTo:

Mais cela échouera probablement encore dans certains navigateurs. Voici la section appropriée du code source de Le plugin scrollTo d’Ariel Flesher pour jQuery :

// Hack, hack, hack :)
// Returns the real elements to scroll (supports window/iframes, documents and regular nodes)
$.fn._scrollable = function(){
  return this.map(function(){
    var elem = this,
      isWin = !elem.nodeName || $.inArray( elem.nodeName.toLowerCase(), ['iframe','#document','html','body'] ) != -1;

    if( ! isWin ) {
      return elem;
    }


    var doc = (elem.contentWindow || elem).document || elem.ownerDocument || elem;

     return $.browser.safari || doc.compatMode == 'BackCompat' ?
       doc.body : 
       doc.documentElement;
  });
};

Vous pouvez alors lancer:

$(window)._scrollable().scrollTop();

Pour déterminer la distance parcourue par l'iframe.

10
Doug Neiner
$('#myIframe').contents().scrollTop()
25
Adam V.

J'ai trouvé cette question en essayant de SET scrollTop dans une iframe ... pas exactement votre question (vous vouliez l'obtenir), mais voici une solution à l'intérieur d'iframes pour les personnes qui finissent également ici par essayer de SET.

Si vous voulez faire défiler vers le haut de la page cela ne fonctionnera PAS à l'intérieur d'un iframe:

$("html,body").scrollTop(0);

Cependant, cela fonctionnera:

document.getElementById("wrapper").scrollIntoView();

Ou l'équivalent avec jQuery:

 $("#wrapper")[0].scrollIntoView();

Pour ce balisage (contenu dans un iframe):

<html>
  <body>
    <div id="wrapper">
      <!-- lots of content -->
    </div>
  </body>
</html>
20
Chris Jacob

Bon vieux javascript:

scrollTop = document.getElementById(IFRAME_ID).contentWindow.document.body.scrollTop;
5
dudkaman
$('#myIframe').contents().scrollTop(0);

Fonctionne uniquement avec "0" comme paramètre

2
Peppeneppe

ou utiliser celui-ci

sample.showLoader = function() {
// show cursor wait
document.getElementsByTagName('body')[0].style.cursor = 'wait';
var loader = $('#statusloader');
// check if we're runnign within an iframe
var isIframe = top !== self;
if (isIframe) {
    var topPos = top.pageYOffset + 300;
    // show up loader in middle of the screen
    loader.show().css({
        top : topPos,
        left : '50%'
    });
} else {
    // show up loader in middle of the screen
    loader.show().css({
        top : '50%',
        left : '50%'
    });
}
};
0
hypery2k

J'ai essayer de

$('#myIframe').contents().scrollTop(0);

et 

 let scrollTop = document.getElementById(IFRAME_ID).contentWindow.document.body.scrollTop;

la première fonction de travail réussi dans le navigateur de bureau. ne fonctionne pas dans le navigateur mobile. donc j'utilise une autre fonction avec scrollIntoView 

$("#ButtonId").click(function() {
        var win = document.getElementById(IFRAMEID).contentWindow;
        var scrollTop = win.document.documentElement.scrollTop || win.pageYOffset || win.document.body.scrollTop;
        // scrollTop can getted
        if (scrollTop) {
            win.document.documentElement.scrollTop = 0;
            win.pageYOffset = 0; // safari
            win.document.body.scrollTop = 0;
        } else {
            win.document.body.scrollIntoView(true); // let scroll to the target view 
        }
    });

scrollIntoView() view in scrollIntoView - MDN

0
林平君

Je sais que je suis en retard pour le jeu ici, mais j’essayais de résoudre ce problème pour une longue liste sur mobile. ScrollTop () ne fonctionnait pas pour moi en raison de conflits entre domaines (et n’a pas accès à la fenêtre parente), mais le changement de hauteur a eu les effets suivants:

$('#someClickableElementInIFrame').on('click', function(e){
      $("html body").animate({
      'height' : "0"
    }, {
        complete: function(){
          $("html body").css({
            'height' : "auto"
            })
          }
      })
});
0
BenTheHumanMan