iOS浏览器 - 使用JavaScript

Question

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

问题：

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

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

此错误仅出现在iOS上，包括此时的最新版本（9.2）

Answer 1

问题描述：

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

Answer 2

如果你使用这样的代码

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

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

Answer 3

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

从'@ ionic-native / keyboard'导入{键盘};

this.Keyboard.disableScroll（true）;

Answer 4

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

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

）。

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

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