时间戳

首页 > 解决方案 > 从 Angular iframe（Safari 桌面）内部滚动到页面顶部

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

问题描述

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

标签： angulariframescrollsafari

解决方案

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

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

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

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

推荐阅读