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

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

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

我创建了一个演示来演示：

---

诀窍是将以下

onload=“window.parent.parent.scrollTo（0,0）”

附加到

iframe

中，这样就可以了

在iframe中使用JavaScript，引用父对象并调用该方法

---

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

在iframe页面中

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

在相关页面上：

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

如果您有交叉源（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);
}

然后在父项中编码：

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

充满活力

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

---

谢谢如果在iframe中的body标记中执行onload=“window.parent.scrollTo（0,0）”，它也可以工作。将onload添加到iframe标记比将其添加到body标记要性感得多，因为如果使用CMS，没有多少人可以选择手动标记“body”。好建议@aruanoc仅在iframe中的域与父域匹配时才起作用。@EstelleChvl我认为这是不可能的，因为X-Origin策略。如果我错了，请纠正我，但我认为：1。一个家长就足够了，不需要家长。家长，2。此代码必须附加到iframe中子文档的body标记。无法从父文档执行此操作。最佳答案在此处。我不确定您是否需要检查event.origin，但我认为浏览器可以处理这个问题。另外，我会在

event.data.task

上使用一个开关，但这不会改变逻辑。父/子源应该是域，还是父/子的完整URL？i、 e.

parent_origin

https://test.testsite.com，还是应该是

https://test.testsite.com/path/to/my/page.html/

，其中第二个URL是父页面的URL？谢谢。我一直在寻找解决办法。这对我起了作用。当我将var parent_origin=''修改为父项的URL而不是iframe var parent_origin=''时，它起作用了。如果嵌入到不同的域中，由于跨源限制，这将不起作用