ios 不支持 iframe 的完美解决方法(兼容iOS&安卓)
2017-07-06 08:06
531 查看
最近做微信公众号页面,因为入口不同,需要把公共页面抽取出来,然后根据不同的值,传递给后台不同的入口。刚开始用iframe页面嵌套(第一次尝试使用),但发现iOS系统对iframe嵌套页面的高度和定位控制的不到位,具体表现为,当嵌套的子页面的高度大于父页面的高度,且子页面中有触发弹框事件时,这时,如果子页面高度远远大于父页面高度,就会出现弹框找不到的情况,其实可能是在视口以下,弹框的位置只是相对于子页面来定位,并没有相对于视口定位。
尝试了好多种方法,均不理想,而安卓系统则表现良好,于是想到,iOS系统可直接做页面跳转,而安卓系统则正常使用iframe(如果安卓系统直接做页面跳转,会有问题,故使用iframe),
直接看代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <title>网上申请</title> </head> <body> <script src="js/zepto.min.js"></script> <script> $(function() { var originId = sessionStorage.setItem('originId', '3'); //originId为后台需要判断是哪个入口的值 var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (isAndroid) { //安卓终端使用iframe var winH = $(window).height(); var iframe = document.createElement('iframe'); iframe.src = "index_common.html"; iframe.style.width = '100%'; iframe.style.height = winH + 'px'; iframe.style.border = '0 none'; iframe.setAttribute('scrolling', 'auto'); document.body.appendChild(iframe); } else if (isiOS) { //iOS终端直接页面跳转 location.href = 'index_common.html'; } else { location.href = 'index_common.html'; } }) </script> </body> </html>
以上这篇ios 不支持 iframe 的完美解决方法(兼容iOS&安卓)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- ios 不支持 iframe 的完美解决方法(兼容iOS&安卓)
- DIV CSS兼容性解决IE6/IE7/FF浏览器的通用方法完美兼容
- DIV CSS兼容性解决IE6/IE7/FF浏览器的通用方法完美兼容
- 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法,跨域调用JS不再是难题!
- 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
- 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
- 兼容解决 IE 和(火狐)FF中 Iframe框架的页面缓存的方法
- ExtJs中tabPanel放置iframe无法兼容IE6的解决方法
- 完美解决 IOS系统safari5.0 浏览器页面布局iframe滚动条失效问题
- iframe框架高度自适应在兼容模式下(ie7)不兼容的解决方法
- IE6不支持min-height或max-width等完美解决方法
- iOS解决低版本兼容的方法
- 兼容解决 IE 、火狐、谷歌浏览器中 Iframe框架的页面缓存的方法
- ie9不支持line-height_ie9不支持字体垂直居中兼容问题解决篇_IE9中字体不能垂直居中解决方法
- IE6支持position:fixed完美解决方法
- Shtml完美解决静态页面内部调用其他页面(非Iframe、Object、Js方法)
- ExtJs中tabPanel放置iframe无法兼容IE6的解决方法
- IOS 版本方法兼容解决办法
- 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
- IOS系统对position:fixed支持不好的解决方法