最近做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">

</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的解决办法的更多相关文章

  1. 谷歌浏览器Chrome不再支持showModalDialog的解决办法

    问题重现 弹出窗口编码: JavaScript 0 1 2 3 4 5 6 7   var obj = new Object();   var retval = window.showModalDia ...

  2. mac中matplotlib不支持中文的解决办法

    参考:https://blog.csdn.net/kaizei_pao/article/details/80795377 首先查看matplotlib已加载的字体: import matplotlib ...

  3. ios 静态库冲突的解决办法

    最近在做一个 iOS 的 cocos2d-x 项目接入新浪微博 SDK 的时候被“坑”了,最后终于顺利的解决了.发现网上也有不少人遇到一样的问题,但是能找到的数量有限的解决办法写得都不详细,很难让人理 ...

  4. 苹果手机对网页上样式为position:fixed的弹窗支持不好的解决办法

    在Web页面上,如果想模拟对话框效果,一般会给div元素添加position:fixed的样式来实现,然后给背景添加一个半透明的遮罩.如: .fixedDiv { position: fixed; t ...

  5. php中curl不支持https的解决办法

    在php程序中使用curl去访问https站点时,报错:Protocol https not supported or disabled in libcurl 该错误信息表示php当时编译时使用的cu ...

  6. python---不支持中文注释解决办法

    很神奇的一件事儿,pycharm不支持中文注释,具体解决办法: #-*- coding: utf- -*- 具体使用:

  7. 服务不支持 chkconfig 的解决办法

    在chkconfig --add servername的时候老是提示服务不支持 chkconfig 经过查找,解决办法如下. 1.脚本tomcatstart前三行如下: #!/bin/bash #ch ...

  8. 关于scrollbar-face-color只支持ie的解决办法！

    关于scrollbar-face-color只支持ie的解决方法!!今天突然有人问我滚动条css自定义的方法,我发现用scrollbar-base-color这种方法只有ie支持,查了半天资料总结如下 ...

  9. Can't find keyplane iOS模拟器键盘不显示解决办法

    静下心来学技术,新一波的问题再度来袭 学习swift的时候做一个app,需要用到数字键盘,但是在调试了几次后数字键盘便出不来了,控制台中弹出这样一个错误 Can't find keyplane tha ...

随机推荐

  1. Yii2.0连接多个数据库

    Yii2.0连接多个数据库    一个项目根据需要会要求连接多个数据库,这里记录下实际项目中的操作流程.包括对数据库连接的配置以及如何生成模型文件,在控制器中加以运用. 一．配置 打开数据库配置文件c ...

  2. Django REST Framework API Guide 06

    本节大纲 1.Validators 2.Authentication Validators 在REST框架中处理验证的大多数时间,您将仅仅依赖于缺省字段验证,或在序列化器或字段类上编写显式验证方法.但 ...

  3. Linux Django项目测试

    步骤 django项目: 依赖包 [root@web01 ~]# yum install openssl-devel bzip2-devel expat-devel gdbm-devel readli ...

  4. JS高级

    一.函数高级 1.函数回调 函数回调的本质:在一个函数中,满足特定条件下,调用另一个函数 // 回调的函数 function callback(data) {} // 逻辑函数 function fu ...

  5. 布思算法Java实现

    public String multiply(String Q,String M){ char Q0 = '0'; String A = get01(Q.length(),"0") ...

  6. liunx mysql 备份

    执行命令:mysqldump -uroot -p lanwei > lanwei2018-08-02.sql 出错 -bash: mysqldump: command not found 查看m ...

  7. elementui+vue修改elementUi默认样式不生效

    重写,覆盖都不行, ! important  也不行. 原因是 在style标签加了 scoped 的原因.

  8. [转] vue自定义组件(通过Vue.use()来使用)即install的使用

    在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法: 1.首先新建一个Cmponent.vue文件 // Cmponent.vue<te ...

  9. OpenCV绘制图像中RGB三个通道的直方图

    一开始是看<OpenCV计算机视觉编程攻略(第2版)>这本书学做直方图,但是书本里说直方图的部分只详细说了黑白图像(单通道)的直方图绘制方法,RGB图像的直方图只说了如何计算,没有说计算完 ...

  10. python之re正则简单够用

    0. 1.参考 Python正则表达式指南 https://docs.python.org/2/library/re.html https://docs.python.org/2/howto/rege ...