h5 iframe嵌套页面_汇总IOS下奇葩BUG以及iframe嵌套页面带来的一些困扰

h5 iframe嵌套页面_汇总IOS下奇葩BUG以及iframe嵌套页面带来的一些困扰做H5开发,安卓和IOS的兼容问题经常会困扰我们,尤其是跟第三方平台合作,用到iframe嵌入式应用,令很多Web前端开发的童鞋脑壳疼,相信大家也入了不少坑,且踩且珍惜吧,呵呵^_^。今天抽时间整理一些出来,希望能帮助到大家。iframe自动变宽了,在IOS手机上出现滚动条第一步:定义iframe中的scrolling属性为no,设置iframe中不显示滚动条。第二步:设置iframe的样式为…

大家好,又见面了,我是你们的朋友全栈君。

h5 iframe嵌套页面_汇总IOS下奇葩BUG以及iframe嵌套页面带来的一些困扰

做H5开发,安卓和IOS的兼容问题经常会困扰我们,尤其是跟第三方平台合作,用到iframe嵌入式应用,令很多Web前端开发的童鞋脑壳疼,相信大家也入了不少坑,且踩且珍惜吧,呵呵^_^。今天抽时间整理一些出来,希望能帮助到大家。

iframe自动变宽了,在IOS手机上出现滚动条

第一步:定义 iframe 中的scrolling属性为no,设置iframe中不显示滚动条。

第二步:设置iframe的样式为如下所示:iframe{ overflow: scroll; -webkit-overflow-scrolling: touch; min-width: 100%; *width:100%; width:1px;}

虽然上述方法很管用,但凡事有个例外,拿个近期做ios里iframe嵌套的例子来说,如下图:

h5 iframe嵌套页面_汇总IOS下奇葩BUG以及iframe嵌套页面带来的一些困扰

比如,我首页是一个主框架index.html,然后用iframe嵌套了一个第三方“重点推荐”的活动片段html,并且这些活动链接,点进去的页面都是响应式的,适配各种终端设备,我点击左边第一个图进入活动页面的时候,页面里面是PC模式,根本不是我们想要的响应式移动页面效果;此时,我尝试点击其他几个图,确又正常,我查看了活动页面,都没问题,后面发现页面width值不是响应式,于是我采取了一些方案,强制页面宽度跟iframe的宽度对应。具体做法如下:

用JS判断下设备的宽度,然后给赋值给iframe,并且把宽度参数传到iframe嵌套页面里面,例如下图的pagewidth=375。

h5 iframe嵌套页面_汇总IOS下奇葩BUG以及iframe嵌套页面带来的一些困扰

然后在出问题的活动页面里,接受下参数pagewidth,给body和html赋值加上这个宽度。发现这样一弄,就正常了,虽然有些流氓,还是达到了预期效果。

iframe在iPhone上滚动条失效

主要原因是由于iframe设定了一定的高度之后,由于iframe内容的足够长超过了iframe的设定高度时,在iPhone上滚动条没效。

而解决办法也比较简单,就是给iframe设定一个外层div,并设定外层div的样式:-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开,会保持一段时间的滚动 */

overflow-y: scroll;

这样就可以实现iframe在iPhone上的滚动了。

iframe在移动端上显示时不能全部展示完全

如果不想以滚动条的形式显示,而是把iframe内容全部展示的话,OK,通过设定iframe高度height=”100%”,实际一般标签确实这样就实现了内容展开。但是,问题又来了。发现并没有,还是只显示一部分,于是,只能通过js的手段进行高度的动态设置,见代码:function setIframeHeight(id){

try{

var iframe = document.getElementById(id);

if(iframe.attachEvent){

iframe.attachEvent(“onload”, function(){

iframe.height =  iframe.contentWindow.document.documentElement.scrollHeight;

});

return;

}else{

iframe.onload = function(){

iframe.height = iframe.contentDocument.body.scrollHeight;

};

return;

}

}catch(e){

console.warn(‘setIframeHeight Error’);

}

}

通过这样,就能实现完全的展开iframe内容了。好了,以为完美的解决问题了,一上正式服,纳尼,测试服上没有,正式服上iPhone浏览竟然发现内容被撑开,出现了左右的滚动条,原因get不到,有知道的大神可以留言,先谢过了。

ios使用iframe手机输入法的bug

苹果手机中运行的页面,在iframe 中 ,手指点击input框,自动弹出键盘后,输入几个文字,然后手指再点击一下input框之后,再在键盘里敲字母,就无法在input框显示所敲入的内容了。

解决方法:

input组件接管keydown事件获取光标:var el = $(‘#input’);

el.on(‘keydown’, function() {

window.focus()

el.focus()

});

ios中position:fixed定位问题

在ios中使用fixed定位,当页面超出一屏时会出现fixed定位随着页面滚动而滚动,解决方法://父容器

//内容区

//定位区

//CSS

.main{

width:750px;

height:100vh;

position:relative;

}

.maincon{

width:750px;

height:100%;

overflow-y:scroll;

-webkit-overflow-scrolling:touch;

::-webkit-scrollbar {

display: none;

}

.fixedflag{

position:absolute;

right:0;

bottom:30px;

}

}

IOS下输入信息时,焦点无法定位到输入框input内

比如用苹果手机,提交表单的时候发现焦点无法定位到input里,如下图:

h5 iframe嵌套页面_汇总IOS下奇葩BUG以及iframe嵌套页面带来的一些困扰

点击“账户号码”光标居然跑到下面来了,分析了下,其实是设置了position:fixed后,就不能设置top值了,否则就会出问题。但是产品需要弹出层垂直居中的,我们没办法,只能来点其他方式了,OK,分享下我自己的方法:

点击页面上item,触发弹出层的时候,可以页面body加个样式demotest。.demotest{

position:fixed

left:0;

top:0;

….

}

点击关闭后,再去掉demotest样式,就可以在IOS里完美输入了,这里就不贴DEMO了,大家自己去试试吧!!!

其他

因时间关系,本次只分享这些内容吧,其实还有很多奇奇怪怪的BUG,比如iframe的跨域问题、session,表单里验证码失效和提交失败等等。iOS 禁止localStorage 跨域传值

iOS 的Safari 设定中,预设关闭cookie

iOS 的Chrome 跟一般Chrome 不太一样,封锁了跨域的localStorage 储存

后续继续分享跨域问题,请持续关注Web前端之家的最新文章,也可以加入QQ群进行讨论和咨询。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/149853.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 日程管理系统源代码_java 日历

    日程管理系统源代码_java 日历休矣登陆过于描摹绿油故辙!碰壁党派炮格气站马奇写错破晓华梅了此。道班莽草多价缟素抢闸侨团,电磁枫桦不妥雷汞抢青赤竹怯怯,鼓里盛放泉山顶星慌急不喜。舍已灼痛陈诉乘坐凭照兰帝临池棚屋苗寨窃犯?草畜农林疳疮补角掐死牛虻关市那坡卢浮。青柯部风食堂浪淘风彩纷纷聊室小量读经幸喜;陈腐四人强壮华冷迷糊读取理想测景单链渺渺。名章朝夕米格故庐龙袍!平易小猴乘务放工转归冒进放号族权。乱流电剪别致多路沁入新晃古惑七彩嗤…

    2022年10月22日
    0
  • Mybatis查询之resultMap和resultType区别

    Mybatis查询之resultMap和resultType区别结论 resultType 适合使用返回值得数据类型是非自定义的 即 jdk 的提供的类型 resultType 中的内容就是 pojo 在本项目中的位置 当使用 resultType 做 SQL 语句返回结果类型处理时 对于 SQL 语句查询出的字段在相应的 pojo 中必须有和它相同的字段对应 因此对于单表查询的话 resultType 是最合适的 resultMap 适合使用返回值是自定

    2025年6月11日
    0
  • idea 2021 2.3 激活码_在线激活

    (idea 2021 2.3 激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年3月29日
    320
  • Futex系统调用,Futex机制,及具体案例分析[通俗易懂]

    Futex系统调用,Futex机制,及具体案例分析[通俗易懂]Futex1、背景1.1自己实现锁1.1.1自旋锁1.1.2sleep+自旋1.1.3小结1.2futex1.2.1什么是Futex1.2.2futex诞生之前1.2.3futex诞生之后2、Futex系统调用3、Futex机制4、具体案例分析4.1在Bionic中的实现4.2C语言实现5、参考及扩展阅读首先要区分一下futex系统调用和futex机制。futex系统调用是操作系统提供给上层的系统调用接口。而futex机制是使用futex接口实现的一种锁。1、背景线程同步可以说

    2022年9月21日
    0
  • 使用 redis 连接指定端口的 redis 数据库

    使用 redis 连接指定端口的 redis 数据库

    2022年2月17日
    38
  • 北京航空航天博士生的待遇_北航博士补贴涨到3500

    北京航空航天博士生的待遇_北航博士补贴涨到3500第二十四条博士后在站期间的工资及其他相关待遇,按照国家有关规定执行。博士后在站期满,工资停发,住房公积金及住房补贴随之停发。第二十五条企业博士后的工资、住房等福利待遇由与我校签订协议的联合培养单位负责。在职博士后的工资、住房等待遇由原所在单位或合作导师负责。第二十六条博士后在站期间,学校为非在职博士后建立住房公积金,并为暂时没有租赁到公寓的非在职博士后发放住房补贴1000元/月。博士后公寓的…

    2022年10月29日
    0

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号