从 Angular iframe（Safari 桌面）内部滚动到页面顶部答案

【问题标题】：Scrolling to top of page from inside an Angular iframe (Safari desktop)从 Angular iframe（Safari 桌面）内部滚动到页面顶部
【发布时间】：2019-04-03 22:15:09
【问题描述】：

我有一个 Angular 5 应用程序（一个应用程序表单），它嵌入到多个站点的 iframe 中。当用户选择“下一步”转到表单的下一部分时，我需要将页面滚动回顶部。

尝试这样的事情：

window.scrollTo(0,0);
document.body.scrollTo(0,0);
window.parent.scrollTo(0,0);
document.getElementById("myid").scrollIntoView();
document.querySelector('body').scrollIntoView(); => What I'm currently using

在除 Safari 桌面之外的所有浏览器上都可以正常工作。

Safari 似乎不尊重我在 iframe 内部的代码以滚动回 iframe 或父框架的顶部（我知道尝试访问父框架的跨域问题）。到目前为止，我已经通过 BrowserStack 在 MacOS Mojave 上的 Safari 12 中进行了测试。

我只想知道如何在 SAFARI DESKTOP 中实现这一点，而不是在其他常见浏览器中遇到问题，包括 Internet Explorer 11。

当我的表单的下一部分初始化时，我目前正在调用我的滚动顶部函数（用户选择“下一个”并且表单的下一个组件/部分呈现）。我让它像这样滚动回到页面顶部：

例如。

ngOnInit() {
   document.querySelector('body').scrollTo(0,0);
   ...
}

我正在考虑使用 Safari，我可能需要使用不同的生命周期挂钩，例如 ngAfterViewInit()。这只是关于为什么我无法弄清楚为什么 Safari 似乎根本没有滚动到页面顶部的猜测。快速提一下：这在移动版 Safari 上不是问题，因为我们没有将移动版嵌入到 iframe 中，只有桌面版 Safari。

【问题讨论】：

标签： angular iframe scroll safari

【解决方案1】：

所以这与 Angular 无关。几个月后，我仍然仅在某些版本的 Safari（桌面）中遇到此问题。在移动版本上，我们不会在 iframe 内提供相同的内容，因此（对我们而言）没有问题。

到目前为止，我遇到的唯一解决方法是：Cross Domain IFrame element.scrollIntoView() Safari Issue。

以防万一其他人在 Safari 父框架中遇到 iframe 滚动问题...

我在 Safari 版本 9.1、12.1 和 13 中发现了这个错误。

【讨论】：