如何在iframe內點擊子頁面時將父頁面向上滾動？

當有人點擊iframe（子頁面）中的鏈接時，如何讓父頁面滾動到頂部？問題是子頁面將保留在頁面的相同位置，因爲iframe的高度大於父頁面的高度。如何在iframe內點擊子頁面時將父頁面向上滾動？

請注意：父頁面和子頁面位於不同的子域。

我創建了一個演示，以證明這一點： http://www.apus.edu/_test/iframe/index.htm

來源

2010-06-17 Evan

關鍵是要追加以下onload="window.parent.parent.scrollTo(0,0)"到iframe和應該這樣做！

來源

2010-06-26 20:56:00 Evan

謝謝！如果您在iframe中的body標籤中執行onload =「window.parent.scrollTo（0,0）」，它也可以工作。 – aruanoc 2014-02-21 16:51:25

將onload添加到iframe標記比將其添加到body標記要性感得多，因爲如果他們使用CMS，很多人都不能手動標記「body」。好的建議，但！ – Evan 2014-06-13 14:04:09

@aruanoc僅當iframe中的域與父域匹配時纔有效。 – voodoocode 2015-04-17 12:51:04

在iframe中使用JavaScript，引用父項並調用scroll()方法。

window.parent.scroll(0,0);

來源

2013-12-24 01:59:39

非常感謝：D – Pomster 2014-01-27 09:27:19

在iframe頁面中。

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

論parrent頁：

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

來源

2014-04-30 10:38:41 steffanjj

如果你有交叉的起源（iframe和家長有不同的域），那麼就調用window.scrolTo（0,0）將無法正常工作。

交叉原點的一個解決方案是從iframe向父級發送可信消息。

代碼的iframe中：

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

然後代碼在父：

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

來源

2017-12-06 20:46:25 Doaa

如何在iframe內點擊子頁面時將父頁面向上滾動？

回答

相關問題