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

Question

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

Veuillez noter que les pages parent et enfant se trouvent dans des sous-domaines différents.

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

Answer 1

L'astuce consiste à ajouter le onload="window.parent.parent.scrollTo(0,0)" suivant au iframe et qui devrait le faire!

Answer 2

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

window.parent.scroll(0,0); 

Answer 3

Dans la page Iframe.

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

Sur la page Parrent:

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

Answer 4

Si vous avez des origines croisées (iFrame et les parents ont des domaines différents), puis juste appeler window.scrolTo (0,0) ne fonctionnera pas .

Une solution d'origine croisée consiste à envoyer un message sécurisé 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); 

Ensuite code 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); 
}