首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >iOS浏览器-当使用JavaScript更改css或内容时,iFrame会跳转到顶部

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

Stack Overflow用户
提问于 2016-01-13 20:22:57
回答 4查看 13.7K关注 0票数 30

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

问题:

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

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

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

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2016-01-13 20:22:57

问题描述:

这个问题似乎是iOS中的浏览器(包括使用the same rendering engine的chrome )没有正确计算iFrames的高度,这会导致浏览器上发生重绘时的跳跃行为。

解决方案:

解决方案A:将以下代码添加到iFrame样式表中可以解决大多数情况下的问题,尽管滚动拖动事件等可能会出现这种方法的问题。

代码语言:javascript
复制
html, body {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

解决方案B:当iFrame渲染完所有内容时,您应该计算iFrame内容的高度,然后使用javascript中的内联样式在iFrame元素上显式设置该高度值。当在iFrame中修改或添加内容时,需要更新此值,您必须确保高度始终正确,以防止跳跃再次发生。

这在处理第三方插件和小部件时带来了挑战,这些插件和小部件在没有明显回调的情况下改变了页面。目前处理这个问题的最好方法是使用mutation observers

票数 48
EN

Stack Overflow用户

发布于 2017-05-24 20:03:34

如果您使用如下代码

代码语言:javascript
复制
var doc = document.getElementById(id).contentWindow.document;
doc.open();
doc.write(data);
doc.close();

试着删除doc.close();它帮了我大忙。

票数 0
EN

Stack Overflow用户

发布于 2018-07-21 00:15:24

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

从‘@ionic native/ Keyboard’导入{keyboard};

This.Keyboard.disableScroll(真);

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/34766636

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档