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

Question

这个问题似乎永远存在.在某些特定情况下,iOS浏览器会出现这个令人沮丧的bug.

问题:

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

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

此错误仅出现在iOS上,包括此时的最新版本(9.2)

Answer 1

问题描述:

问题似乎是iOS中的浏览器(包括使用相同渲染引擎的 chrome )无法正确计算iFrame的高度,这会导致在浏览器上重新绘制时出现跳跃行为.

解决方案:

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

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

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

这在处理第三方插件和小部件时会带来挑战,这些插件和小部件会在没有明显回调的情况下改变页面.目前处理这个问题的最佳案例是使用变异观察者.