web-dev-qa-db-fra.com

Comment faire défiler la page parent vers le haut lorsque la page enfant est cliquée dans iframe?

Quand quelqu'un clique sur un lien dans une iframe (page enfant), comment faire défiler la page parent vers le haut? Le problème est que la page enfant restera au même endroit de la page, car l'iframe a beaucoup plus de hauteur que la page parent.

Veuillez noter: les pages parent et enfant sont sur des sous-domaines différents.

J'ai créé une démo pour montrer ceci: http://www.apus.edu/_test/iframe/index.htm

iframescrollparent
35
Evan

L'astuce consiste à ajouter la onload="window.parent.parent.scrollTo(0,0)" suivante à la iframe et cela devrait le faire!

52
Evan

En utilisant JavaScript dans l'iframe, référencez le parent et appelez la méthode scroll () .

window.parent.scroll(0,0);
11
James Lawruk

Si vous avez des origines croisées (l'iframe et le parent ont des domaines différents), alors simplement appeler window.scrollTo (0,0) ne fonctionnera pas.

Une solution pour cross-Origin consiste à envoyer un message de confiance de l'iframe au parent.

Code à l'intérieur de l'iframe:

var parent_Origin = 'http://your/iframe/domain/here'
parent.postMessage({'task': 'scroll_top'}, parent_Origin);

Puis codez dans le parent:

function handleMessage(event) {
    var accepted_Origin = 'http://your/iframe/domain/here';
    if (event.Origin == accepted_Origin){
        if (event.data['task'] == 'scroll_top'){
           window.scrollTo(0,0);
        }
        // you can have more tasks
    } else{
        console.error('Unknown Origin', event.Origin);
    }
}

window.onload = function() {
    window.addEventListener("message", handleMessage, false);
}
10
Doaa

Dans la page Iframe.

window.parent.ScrollToTop(); // Scroll to top function

Sur la page parent:

window.ScrollToTop = function(){
  $('html,body', window.document).animate({
    scrollTop: '0px'
  }, 'fast');
};
4
steffanjj