如何在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中使用JavaScript,引用父级并调用scroll()方法.

window.parent.scroll(0,0);

Answer 3

如果你有交叉起源(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 4

在 Iframe 页面内。

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

在父页面上：

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