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

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

2021-03-22 16:42iOS开发网 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>