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

Posted 2023-03-06

【中文标题】iOS 浏览器 - 使用 JavaScript 更改 css 或内容时 iFrame 跳转到顶部

【英文标题】：iOS browser - iFrame jumps to top when changing css or content using JavaScript

【发布时间】：2016-04-18 10:10:51

【问题描述】：

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

问题：

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

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

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

【参考方案1】：

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

我用 iframe 样式表中的这个 CSS 解决了这个问题（逻辑上我可以访问嵌入式网络！）。

我的宽度有问题，我通过添加我的 javascript 解决了它：

var x = screen.width; 
$('body').css('width',x+'px');

【参考方案2】：

我在 Ionic 3 中找到了一个解决方案，它可以安装本机键盘并禁用输入时自动对焦，使用下一个代码

从'@ionic-native/keyboard'导入键盘；

this.Keyboard.disableScroll(true);

【讨论】：

github.com/ionic-team/cordova-plugin-ionic-keyboard/blob/… 该功能已消失。 ://

【参考方案3】：

问题描述：

问题似乎是 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。

【讨论】：

哇，这对我有用（解决方案 A）。我已经找了几个月了。谢谢！

解决方案 A 也适用于我。这三种风格都很重要。

当我这样做时，它会停止跳跃，但是它会导致 iPhone 上折叠下方的照片无法显示。我试过添加 -webkit-transform: translate3d(0,0,0);正如论坛上的研究所说，这解决了这个问题，但对我来说却没有。有人解决过这样的问题吗？

您能否展示一个显示该问题的测试站点？

我快速浏览了一下，您使用的是旧的 jQuery 延迟加载库，这几乎肯定是问题所在。我希望它没有检测到您正在滚动，因此资产保持卸载状态。

【参考方案4】：

如果你使用这样的代码

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

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