javascript - iOS 浏览器 - 当使用 JavaScript 更改 css 或内容时，iFrame 跳转到顶部

这个问题似乎一直存在。在某些特定情况下，iOS 浏览器会出现这个令人沮丧的错误。

问题:

如果您有一个包含 iFrame 的网页，并且您正在以编程方式修改 iFrame 内容文档，则 iFrame 将跳转到页面顶部。但是，只有当页面在 DOM 操作之前超出某个高度时才会发生这种情况，通常这似乎是一个大于视口(viewport)长度两倍的长度。

无论您是修改 DOM 结构还是更改样式属性，都会出现此问题。

此错误仅存在于 iOS 上，包括截至此时的最新版本 (9.2)

最佳答案

问题描述:

问题似乎是 iOS 中的浏览器(包括使用 the same rendering engine 的 chrome)没有正确计算 iFrame 的高度，这会在浏览器上发生重绘时导致跳转行为。

解决方案:

解决方案 A:将以下代码添加到 iFrame 样式表可以解决大多数情况下的问题，但滚动拖动事件等可能会导致此方法出现问题。

html, body {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

解决方案 B: 当 iFrame 呈现所有内容时，您应该计算 iFrame 内容的高度，然后使用 javascript 中的内联样式在 iFrame 元素上显式设置该高度值。当在 iFrame 中修改或添加内容时，需要更新此值，您必须确保高度始终正确，以防止再次发生跳转。

这在处理第三方插件和小部件时提出了挑战，这些插件和小部件会在没有明显回调的情况下更改页面。目前处理此问题的最佳案例是使用 mutation observers .

关于javascript - iOS 浏览器 - 当使用 JavaScript 更改 css 或内容时，iFrame 跳转到顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34766636/