码迷,mamicode.com
首页 > 移动开发 > 详细

IOS不支持iframe的解决办法

时间:2018-06-04 16:26:38      阅读:318      评论:0      收藏:0      [点我收藏+]

标签:支持   代码   element   index   har   center   cal   位置   comm   

ios 不支持 iframe 的完美解决方法最近做微信公众号页面,因为入口不同,需要把公共页面抽取出来,然后根据不同的值,传递给后台不同的入口。刚开始用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">

</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的解决办法

标签:支持   代码   element   index   har   center   cal   位置   comm   

原文地址:https://www.cnblogs.com/bugo/p/9133157.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!