2010-06-17 18 views
28

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.Jak przewinąć stronę nadrzędną do góry, gdy strona podrzędna jest klikana w elemencie iframe?

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

Odpowiedz

46

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

+2

Dzięki! Działa również wtedy, gdy w tagu treści w elemencie ifradzonym jest onload = "window.parent.scrollTo (0,0)". – aruanoc

+2

Dodanie onload do tagu iframe jest o wiele bardziej seksowne niż dodanie go do tagu body, ponieważ niewielu ludzi ma opcję ręcznego oznaczenia "ciała", jeśli na przykład używają CMS. Dobra sugestia! – Evan

+4

@aruanoc Działa tylko wtedy, gdy domena w elemencie iframe pasuje do domeny nadrzędnej. – voodoocode

9

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

window.parent.scroll(0,0); 
+0

Wielkie dzięki: D – Pomster

5

Na stronie Iframe.

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

Na Parrent stronie:

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

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); 
} 
Powiązane problemy