ios 不支持 iframe 的完美解决方法(兼容iOS&安卓)

程序员文章站 2023-12-19 13:33:22

最近做微信公众号页面，因为入口不同，需要把公共页面抽取出来，然后根据不同的值，传递给后台不同的入口。刚开始用iframe页面嵌套（第一次尝试使用），但发现ios系统对ifr...

最近做微信公众号页面，因为入口不同，需要把公共页面抽取出来，然后根据不同的值，传递给后台不同的入口。刚开始用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&安卓)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。