iOS浏览器 – 使用JavaScript更改CSS或内容时，iFrame跳转到顶部

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

问题：

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

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

这个错误只在iOS上出现，包括截至目前的最新版本（9.2）

Answer 1

问题描述：

问题似乎是iOS中的浏览器（包括使用相同渲染引擎的 chrome）不能正确计算iFrame的高度，这导致在浏览器上重新绘制时产生跳跃行为。

解决scheme：

解决schemeA：将下面的代码添加到iFrame样式表中可以解决大多数情况下的问题，但拖动事件等的滚动可能会出现这种方法的问题。

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

解决schemeB：当iFrame内容已经呈现时，您应该计算iFrame内容的高度，然后在javascript中使用内联样式在iFrame元素上明确设置该值。 当内容被修改或添加到iFrame中时，此值需要更新，您必须确保高度总是正确的，以防止重复出现的跳转。

这在处理第三方插件和小部件时会带来挑战，而这些插件和小部件并没有明显的callback来改变页面。 现在处理这个问题的最好的例子是使用突变观察者 。

Answer 2

如果你使用这样的代码

 var doc = document.getElementById(id).contentWindow.document; doc.open(); doc.write(data); doc.close(); 

尝试删除doc.close(); 它帮助了我。