最近做微信公众号页面,因为入口不同,需要把公共页面抽取出来,然后根据不同的值,传递给后台不同的入口。刚开始用iframe页面嵌套(第一次尝试使用),但发现iOS系统对iframe嵌套页面的高度和定位控制的不到位,具体表现为,当嵌套的子页面的高度大于父页面的高度,且子页面中有触发弹框事件时,这时,如果子页面高度远远大于父页面高度,就会出现弹框找不到的情况,其实可能是在视口以下,弹框的位置只是相对于子页面来定位,并没有相对于视口定位。
尝试了好多种方法,均不理想,而安卓系统则表现良好,于是想到,iOS系统可直接做页面跳转,而安卓系统则正常使用iframe(如果安卓系统直接做页面跳转,会有问题,故使用iframe),
直接看代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<!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终端
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&安卓)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持服务器之家。