Jak przewinąć stronę nadrzędną do góry, gdy strona podrzędna jest klikana w elemencie iframe?

Question

Kiedy ktoś kliknie link w ramach elementu iframe (strona podrzędna), w jaki sposób mogę uzyskać przewinięcie strony nadrzędnej do strony nadrzędnej? Problem polega na tym, że strona podrzędna pozostanie w tym samym miejscu strony, ponieważ element iframe ma dużo większą wysokość niż strona nadrzędna.

Uwaga: strony nadrzędne i podrzędne znajdują się w różnych subdomenach.

stworzyłem demo, aby pokazać to: http://www.apus.edu/_test/iframe/index.htm

Answer 1

Sztuką jest, aby dołączyć następujące onload="window.parent.parent.scrollTo(0,0)" do iframe i że powinien to zrobić!

Answer 2

Używanie JavaScriptu w elemencie iframe, odwołanie do obiektu nadrzędnego i wywołanie metody scroll().

window.parent.scroll(0,0); 

Answer 3

Na stronie Iframe.

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

Na Parrent stronie:

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

Answer 4

Jeśli mają przekroje pochodzenia (iframe i rodzic mają różne domeny), a następnie po prostu wywołanie window.scrolTo (0,0) nie będzie działać .

Jednym ze sposobów krzyżowego pochodzenia jest wysłanie zaufanej wiadomości z elementu iframe do rodzica.

Kod wewnątrz iframe:

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

Następnie kod w dominującej:

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