Question

我有一个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。

Answer 1

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

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

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

我在Safari 9.1、12.1和13版本中特别看到了此错误。

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

1 个答案: