¿Cómo desplazo la página principal a la parte superior cuando la página secundaria se hace clic dentro de iframe?

Question

Cuando alguien hace clic en un enlace dentro de un iframe (página secundaria), ¿cómo hago para que la página principal se desplace hasta la parte superior? El problema es que la página secundaria permanecerá en el mismo lugar de la página, porque el iframe tiene una altura mucho mayor que la página principal.

Tenga en cuenta: las páginas padre e hijo están en subdominios diferentes.

creé una demo para mostrar esto: http://www.apus.edu/_test/iframe/index.htm

Answer 1

El truco es añadir lo siguiente a la onload="window.parent.parent.scrollTo(0,0)"iframe y que debe hacerlo!

Answer 2

Utilizando JavaScript dentro del iframe, haga referencia al padre y llame al método scroll().

window.parent.scroll(0,0); 

Answer 3

Dentro de la página Iframe.

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

En la página parrent:

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

Answer 4

Si tiene orígenes transversales (el iframe y los padres tienen diferentes dominios), entonces simplemente llamando window.scrolTo (0,0) no funcionará .

Una solución para el origen cruzado es enviar un mensaje confiable del iframe al padre.

Código dentro del marco flotante:

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

Entonces código de la matriz:

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