Comment faire défiler la page parent vers le haut lorsque la page enfant est cliquez dans iframe?
Quand quelqu'un clique sur un lien dans un iframe (page enfant), Comment puis-je 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 de hauteur plus grande que la page parent.
Veuillez noter: les pages parent et enfant sont sur différents sous-domaines.
J'ai créé une démo pour montrer ce: http://www.apus.edu/_test/iframe/index.htm
4 réponses
L'astuce consiste à ajouter le onload="window.parent.parent.scrollTo(0,0)" suivant au iframe et cela devrait le faire!
En utilisant JavaScript dans l'iframe, référencez le parent et appelez la méthodescroll () .
window.parent.scroll(0,0);
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');
};
Si vous avez des origines croisées (l'iframe et le parent ont des domaines différents), alors il suffit d'appeler window.scrolTo (0,0) ne fonctionnera pas.
Une solution pour l'origine croisée 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 le code de la mère:
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);
}