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

Posted 2023-05-09

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

【英文标题】：Force an iframe's parent page to scroll to top automatically when the user navigates in the iframe?

【发布时间】：2017-10-03 19:31:00

【问题描述】：

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

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

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

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

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

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

【问题讨论】：

Get parent page to scroll to top when iframe's form validation fails的可能重复

【参考方案1】：

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

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

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

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

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

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

这个答案提供了一个代码示例https://***.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 发布一条由 父母。由于这是发布的唯一消息，我用它来触发 当且仅当域匹配时滚动事件。

【讨论】：

您好，感谢您的建议，但是我们不能告诉我们的客户添加 JavaScript，而是只需要提供一个元素，即 iframe id="clientID" class="ad" src= "our-application.com" 仅此而已...在客户端域上不添加任何内容的任何解决方案？

正如您提到的，您的 iframe 位于不同的域中，因此 Same Origin policy 将阻止您控制客户端 window。所以我认为如果没有他们向他们的网站添加 javascript 侦听器，您可能无法实现这一目标。

还有什么建议吗？

如果您无法将任何 javascript 添加到客户端网页，那么您将无法控制他们的页面。阅读我在上面链接到的同源策略 - 允许第三方 iframe 控制父页面的安全隐患是巨大的，这就是你不可能这样做的原因。

也许您可以联系客户并要求他们向他们的页面添加一些 javascript，这将消耗一个 postmessage 事件并滚动到顶部。