ios 不支持 iframe 的完美解决方法(兼容iOS&安卓)
时间:2019-03-30
本文章向大家介绍ios 不支持 iframe 的完美解决方法(兼容iOS&安卓),主要包括ios 不支持 iframe 的完美解决方法(兼容iOS&安卓)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
最近做微信公众号页面,因为入口不同,需要把公共页面抽取出来,然后根据不同的值,传递给后台不同的入口。刚开始用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&安卓)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释