iOS浏览器 - 当使用javascript更改CSS或内容时，iFrame跳转到顶部 [英] iOS browser - iFrame jumps to top when changing css or content using javascript

问题描述

这个问题似乎永远存在。

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

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

此错误仅在iOS上显示，包括此时的最新版本）

解决方案

问题描述：

问题似乎是iOS中的浏览器（包括Chrome使用同一个呈现引擎）不正确计算iFrames的高度，当浏览器发生重绘时，会导致跳跃行为。

解决方案：

解决方案A：在大多数情况下，将以下代码添加到iFrame样式表可以解决这个问题，虽然拖动事件等的滚动可能会给这种方法带来问题。

  html，body {
 height：100％; 
 overflow：auto; 
 -webkit-overflow-scrolling：touch; 
} 
  

解决方案B：
iFrame内容已渲染，您应该计算iFrame内容的高度，然后使用javascript中的内联样式在iFrame元素上显式设置该值。这个值需要更新，因为内容在iFrame中修改或添加，您必须确保高度始终正确，以防止重新出现跳跃。

处理第三方插件和小部件，改变页面没有明显的回调。现在处理此问题的最佳情况是使用突变观察器。

This problem seems to have been around forever. Under some specific circumstances, iOS browsers surface this frustrating bug.

The issue:

If you have a webpage which contains an iFrame and you are modifying the iframes content document programatically, the iframe will jump to the top of the page. However, this only happens if the page, before the DOM manipulation, is beyond some height, typically this seems to be a length greater than twice the length of the viewport.

This issue appears regardless of whether you are modifying the DOM structure or changing style properties.

This bug is only present on iOS, including the latest release as of this time (9.2)

解决方案

Problem description:

The issue appears to be that browsers in iOS (including chrome as it uses the same rendering engine) are not correctly calculating the height of iFrames, this is causing jumping behaviour when repaints occur on the browser.

The solutions:

Solution A: Adding the following code to the iFrame stylesheet resolves the issue in most cases, though scrolling for drag events etc may present problems with this approach.

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

Solution B: When the iFrame content has rendered, you should calculate the height of the iFrame content then set that value explicitly on the iFrame element using an inline style in javascript. This value needs to be updated as content is modified or added in the iFrame, you must ensure the height is always correct to prevent the jumping from reoccurring.

This presents challenges when dealing with third party plugins and widgets which alter the page with no obvious callbacks. The best case for dealing with this for now is the use of mutation observers.

这篇关于iOS浏览器 - 当使用javascript更改CSS或内容时，iFrame跳转到顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！