在 iframe 中单击子页面时如何将父页面滚动到顶部？

Question

当有人点击 iframe（子页面）内的链接时，如何让父页面滚动到顶部？问题是子页面将保留在页面的同一位置，因为 iframe 的高度比父页面大很多。

请注意：父页面和子页面位于不同的子域中。

我创建了一个演示来展示这一点： http://www.apus.edu/_test/iframe/index.htm

Answer 1

诀窍是将以下 onload="window.parent.parent.scrollTo(0,0)" 附加到 iframe 即可！

Answer 2

如果您有跨源（iframe 和父级具有不同的域），则仅调用 window.scrollTo(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);
}

Answer 3

在 iframe 中使用 JavaScript，引用父级并调用 scroll( ) 方法。

window.parent.scroll(0,0);

（注意。如果 iframe Url 与父级的域不同，则此操作将不起作用。）

Answer 4

在 Iframe 页面内。

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

在父页面上：

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

Answer 5

带动画

           window.parent.scroll({
              top: 0,
              left: 0,
              behavior: 'smooth'
            });