2009-12-05 12 views
16

Le scrollTop de jQuery renvoie null lorsque la fenêtre est un iframe. Quelqu'un at-il été capable de comprendre comment obtenir scrollTop d'un iframe?Comment faire pour scrollTop d'un iframe

plus d'info:

mon script est en cours d'exécution dans le iframe lui-même, la fenêtre parent est sur un autre domaine, je ne peux pas accéder à l'ID de l'iframe ou quelque chose comme ça

+0

Êtes-vous essayer de l'obtenir à l'intérieur du parent du 'iframe' ou de l'intérieur du' iframe' lui-même? –

+1

de l'iframe lui-même. ill ajouter plus d'informations à ma question – mkoryak

Répondre

10

Vous pouvez définir scrollTop en utilisant cette configuration:

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

vous pourriez donc essayer d'obtenir comme ceci:

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

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

Depuis le plug-in scrollTo:

Mais cela échouera probablement encore dans certains navigateurs. Voici la section pertinente du code source de Ariel Flesher's scrollTo plugin for 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 exécuter:

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

Pour déterminer dans quelle mesure l'iframe a défiler vers le bas.

+0

Merci l'homme. cela fonctionne comme un charme – mkoryak

+0

n'a pas fonctionné pour moi, mais parent. $ ('body'). scrollTop() a fait le travail –

+0

J'ai dû définir une valeur pour scrollTop, donc un petit ajustement: '$ (" html, body "). scrollTop (0);' –

19

J'ai trouvé cette question en essayant de régler scrollTop dans un iframe ... pas exactement votre question (vous vouliez obtenir) mais voici une solution à l'intérieur des iframes pour les gens qui finissent par essayer 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 le equivilent avec jQuery :

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

Pour cette balisage (contenu de l'iframe):

<html> 
    <body> 
    <div id="wrapper"> 
     <!-- lots of content --> 
    </div> 
    </body> 
</html> 
+1

Merci pour ce point @chris. Pour Firefox, seul le scrollIntoView DOM fonctionnait pour la page qui se trouvait dans un iframe (Google Chrome fonctionne avec $ ("body"). ScrollTop (0);). Pour les amateurs de jquery, c'est $ ("# wrapper") [0] .scrollIntoView(); – rsmoorthy

+0

seulement celui-ci semble fonctionner dans IE8 ... merci – handsomeGun

+1

très agréable. de l'extérieur de l'iframe 'document.getElementsByTagName ('iframe') [0] .contentWindow.document.getElementById ('myElementId'). scrollIntoView();' – billynoah

5

bon vieux javascript:

scrollTop = document.getElementById(IFRAME_ID).contentWindow.document.body.scrollTop; 
+0

Ne fonctionne pas lorsque le JS s'exécute dans l'iframe. – mikemaccana

+2

Pour javascript à l'intérieur de l'iframe, laissez la partie qui renvoie l'iframe lui-même: 'scrollTop = document.body.scrollTop;' –

25
$('#myIframe').contents().scrollTop() 
+0

Ne sais pas sur OP, mais cela a résolu pour moi tout le chemin. Je traitais un iframe, et complètement oublié d'appliquer scrollTop() au contenu de celui-ci. Duh! –

+0

À la vôtre. Cela a parfaitement fonctionné pour mon cas - un iframe occupant 100% de la fenêtre avec un modal/overlay chargé dedans. Merci! –

+0

ne fonctionne pas, renvoie null –

0

ou utiliser cette

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%' 
    }); 
} 
}; 
2
$('#myIframe').contents().scrollTop(0); 

fonctionne uniquement avec "0" en tant que paramètre

+0

Si l'argument '0' est donné, le cadre défilera vers le haut (0 pixels à partir du haut). Sans l'argument, la quantité de pixels à partir du haut sera retournée => c'est ce que cette question concerne! –

0

Je sais que je suis en retard au jeu ici, mais j'essayais de comprendre cela pour une longue liste sur mobile. scrollTop() ne fonctionnait pas pour moi en raison de conflits inter-domaines (et je n'ai pas accès à la fenêtre parent), mais en changeant la hauteur fait:

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