脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → IOS → ios不支持iframe的解决方法

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中手风琴表不能移动的解决方法

    IOS中手风琴表不能移动的解决方法

    本文给大家分享的是IOS开发中遇到的一个手风琴特效无法正常工作的问题的解决方法，经过度娘了很久才找到解决方法，这里推荐给大家，有需要的小伙伴可以参考下。
    2015-05-05
  • iOS中Navbar设置渐变色效果的方法示例

    iOS中Navbar设置渐变色效果的方法示例

    这篇文章主要给大家介绍了iOS中Navbar设置渐变色效果的方法，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-06-06
  • iOS实现微信分享多张图片功能

    iOS实现微信分享多张图片功能

    这篇文章主要为大家详细介绍了iOS实现微信分享多张图片功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-01-01
  • iOS直播类APP开发流程解析

    iOS直播类APP开发流程解析

    这篇文章主要为大家详细解析了iOS直播类APP开发流程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 改变iOS应用中UITableView的背景颜色与背景图片的方法

    改变iOS应用中UITableView的背景颜色与背景图片的方法

    这篇文章主要介绍了改变iOS应用中UITableView的背景颜色与背景图片的方法,将UITableView的header、footer设成clearColor时要注意实际效果是否真的变透明,需要的朋友可以参考下
    2016-03-03
  • iOS开发技巧之WeakSelf宏的进化详解

    iOS开发技巧之WeakSelf宏的进化详解

    在程序中我们经常用到Block，但写weak self 时会比较繁琐，下面这篇文章主要给大家介绍了关于iOS开发技巧之WeakSelf宏的进化的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们一起来看看吧
    2018-05-05
  • iOS 将系统自带的button改装成上图片下文字的样子

    iOS 将系统自带的button改装成上图片下文字的样子

    这篇文章主要介绍了 iOS 将系统自带的button改装成上图片下文字的样子,代码是通过继承UIButton，然后再重写layoutSubviews方法，对自带的图片和titleLabel进行重新的layout。下面通过本文给大家分享下实现代码
    2016-12-12
  • 详解iOS多线程GCD的使用

    详解iOS多线程GCD的使用

    Grand Central Dispatch (GCD)是Apple开发的一个多核编程的解决方法，本文给大家详细介绍IOS中GCD的使用，需要的朋友参考下
    2016-03-03
  • iOS功能实现之列表的横向刷新加载

    iOS功能实现之列表的横向刷新加载

    现今已有越来越多的APP需要横向刷新的需求，而横向刷新加载的控件却寥寥无几，即使有也是集成起来非常的麻烦，恰巧最近项目中又用到了这个功能，所以干脆自己来造个轮子，方便大家使用。
    2016-08-08
  • iOS实现APP程序内部打开APP的AppStore页面

    iOS实现APP程序内部打开APP的AppStore页面

    这篇文章主要给大家介绍了关于iOS实现APP程序内部打开APP的AppStore页面的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来看看吧。
    2017-06-06

最新评论