当用户在 iframe 中导航时，强制 iframe 的父页面自动滚动到顶部？

Question

iFrame 加载问题 当 iFrame 加载到客户端页面时，我们会看到页面位置跳来跳去，并且在绝大多数情况下，我们会看到页面焦点位于页面下方。这迫使必须向上滚动才能看到 iframe 应用程序。

我已尝试使用以下方法解决此问题：

$('html,body', window.parent.document).animate({ 滚动顶部：'0px' }， '快速地'）;

iframe id="clientID" class="ad" src="https://www.our-application.com"

这不起作用，因为客户端网站和我们基于 iframe 的应用程序窗口位于不同的域上，所以我们无法直接访问 window.parent 有跨域问题。

请提出如何解决此问题的方法

Answer 1

只有在您可以向父页面添加 javascript 事件侦听器时，此答案才有效。

客户端页面上的“消息”事件侦听器，您可以使用 window.parent.postMessage() 函数 - 请参阅下面的 Mozilla 文档。

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

这个想法是，在您的 iframe 中，您使用 javascript 将消息发布到父窗口。

父窗口包含一个事件监听器，然后滚动到顶部。

您应特别注意上述文档中的安全问题。

这个答案提供了一个代码示例https://stackoverflow.com/a/24914498/7326037

在父窗口中，我有

function receiveMessage(e){

  console.log("Received Message: " + e);

  if (e.originalEvent.origin === 'http://www.site.client.com') {
    $("html, body").animate({
        scrollTop : 441
    }, "fast");
  }
}
$(window).bind("message", receiveMessage);

并为 iframe 内容的原始 js 代码添加了这个：

window.parent.postMessage("Scroll", "http://www.site.client.com/");

这会导致 iframe 发布一条由 父母。由于这是发布的唯一消息，我用它来触发 当且仅当域匹配时滚动事件。