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

概述这个问题似乎一直存在于永远.在某些具体情况下,iOS浏览器会显示这个令人沮丧的错误. 问题： 如果您有一个包含iFrame的网页,并且您正在以编程方式修改iframe内容文档,则iframe将跳转到页面顶部.但是,只有在DOM *** 作之前,如果页面超出某个高度,通常这个页面长度大于视口长度的两倍,才会发生这种情况. 无论您是修改DOM结构还是更改样式属性,都会出现此问题. 这个bug只出现在iOS上, 这个问题似乎一直存在于永远.在某些具体情况下,iOS浏览器会显示这个令人沮丧的错误.

问题：

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

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

这个BUG只出现在iOS上,包括这个时间的最新版本(9.2)

解决方法 问题描述：

问题似乎是iOS中的浏览器(包括Chrome使用the same rendering engine的Chrome)并没有正确计算iframes的高度,这在浏览器发生重绘时会引起跳跃行为.

解决方案：

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

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

解决方案B：
当iframe内容呈现时,您应该计算iframe内容的高度,然后使用JavaScript中的内联样式在iframe元素上显式设置该值.当iframe中修改或添加内容时,需要更新此值,您必须确保高度始终是正确的,以防止重复出现.

这在处理第三方插件和小部件时面临挑战,这些插件和小部件改变了页面,没有明显的回调.现在处理这个最好的案例是使用mutation observers.

总结

以上是内存溢出为你收集整理的iOS浏览器 – 当使用javascript更改CSS或内容时,iFrame跳转到顶部全部内容，希望文章能够帮你解决iOS浏览器 – 当使用javascript更改CSS或内容时,iFrame跳转到顶部所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。