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

更新时间：2017年07月06日 08:06:20 投稿：jingxian

下面小编就为大家带来一篇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>

以上这篇ios 不支持 iframe 的完美解决方法(兼容iOS&安卓)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

iOS自定义collectionView实现毛玻璃效果
不知道大家发现没有苹果在iOS7.0之后,很多系统界面都使用了毛玻璃效果,增加了界面的美观性,所以这篇文章跟大家分享个iOS自定义collectionView实现毛玻璃效果的方法，有需要的可以参考借鉴，下面来一起看看。
2016-09-09
iOS实现全局悬浮按钮
这篇文章主要为大家详细介绍了iOS实现全局悬浮按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
IOS中快速集成短信SDK验证开发(SMSSDK),IOS开发中如何设置手机短信验证码
这篇文章主要介绍了IOS中快速集成短信SDK验证开发(SMSSDK),IOS开发中如何设置手机短信验证码的相关资料,需要的朋友可以参考下
2016-01-01
iOS 下的图片处理与性能优化详解
这篇文章主要介绍了iOS 下的图片处理与性能优化详解，帮助大家更好的理解和学习使用ios开发，感兴趣的朋友可以了解下
2021-04-04
IOS添加自定义字体实例详解
这篇文章主要介绍了IOS添加自定义字体实例详解的相关资料,需要的朋友可以参考下
2017-04-04
iOS实现循环滚动公告栏
这篇文章主要为大家详细介绍了iOS实现循环滚动公告栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-03-03
iOS中输入框设置指定字符输入的方法
这篇文章主要给大家介绍了关于iOS中输入框如何设置指定字符输入的相关资料，其中介绍了关于只能输入纯数字、只能输入纯大小写字母以及大小写字母和数字结合输入等指定字符的限制，需要的朋友可以参考借鉴，下面来一起看看吧。
2018-01-01
iOS开发教程之Status Bar状态栏设置的方法汇总
iOS 的 Status Bar 状态栏是一个比较坑的地方，所以下面这篇文章主要给大家介绍了关于iOS开发教程之Status Bar状态栏设置的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下
2018-08-08
iOS实现音频进度条效果
这篇文章主要介绍了ios实现音频进度条效果,本文写了一个小demo通过实例代码相结合的形式给大家详细介绍，需要的朋友可以参考下
2018-10-10
iOS获取当前设备WiFi信息的方法
很多公司现在都在做免费WIFI，车站、公交、地铁、餐厅，只要是人员密集流动的地方就有WIFI，免费WIFI从最初的网页认证方式也逐渐向客户端认证方式偏移。本文主要介绍iOS获取当前设备WiFi信息的方法，有需要的可以参考借鉴。
2016-09-09