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

Answer 5

带有动画

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

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

5 个答案: