IOS苹果APP描述文件不支持iframe框架的解决办法

最近做ios的兼容,因为入口不同,需要把公共页面抽取出来,然后根据不同的值,传递给后台不同的入口。刚开始用iframe页面嵌套(第一次尝试使用),但发现iOS系统对iframe嵌套页面的高度和定位控制的不到位,:

很多朋友在做描述文件的时候,大多数人会遇到一个共同点,那就是IOS在iframe框架页面上的兼容性几乎为0.完全不适用。在safari浏览器上还好,但一旦打包成IPA或者描述文件时就开始出问题。这个一直是很头疼的事情。
其实当网站页面嵌套的子页面的高度大于父页面的高度时,且子页面中有触发弹框事件时,这时,如果子页面高度远远大于父页面高度,就会出现弹框找不到的情况,其实可能是在视口以下,弹框的位置只是相对于子页面来定位,并没有相对于视口定位。尝试了好多种方法,均不理想,而安卓系统则表现良好,于是想到,iOS系统可直接做页面URL进行跳转,或者PHP里进行内容读取,而安卓系统则正常使用iframe(如果安卓系统直接做页面跳转,会有问题,故使用iframe)。如果需要PHP做内容读取的情况下,需要找客服来解决,收费处理。自行解决的请继续往下看;

下方是技术经过研究,得到的一段JS,可直接使用。


<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>