最近做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. 计算 $\dps{\int_0^\infty\frac{\sin^2x}{x^2}dx=\frac{\pi}{2}}$

    计算 $\dps{\int_0^\infty\frac{\sin^2x}{x^2}dx=\frac{\pi}{2}}$. 由分部积分, $$\bee\label{1}\bea \int_0^\inft ...

  2. 使用VS的生成事件命令行指令将生成的exe，dll文件复制到指定文件夹中

    VS预生成事件命令行 和 生成后事件命令行 宏说明 $(ConfigurationName)            当前项目配置的名称(例如,“Debug|Any CPU”). $(OutDir)   ...

  3. bilibili存储型xss (绕过长度限制打乱顺序限制)

    在个人空间的我的收藏中可编辑视频收藏的名称,之后尝试写入标签. http://space.bilibili.com/ 发现输出到前端的尖括号被转义了,不过出现了一个json接口,他的Content-T ...

  4. laravel 跨库执行原生 sql 语句

    执行原生 sql 返回结果集

  5. rest_framework框架的认识

    它是基于Django的,帮助我们快速开发符合RESTful规范的接口框架. 一  路由 可以通过路由as_view()传参 根据请求方式的不同执行对应不同的方法 在routers模块下 封装了很多关于 ...

  6. matplotlib学习笔记

    1.简介 matplotlib是python的一个2D绘图库,它可以在不同平台上地使用多种通用的绘图格式(hardcopy formats)和交互环境绘制出出版物质量级别的图片.matplotlib可 ...

  7. spring boot 添加拦截器的简单实例（springBoot 2.x版本，添加拦截器，静态资源不可访问解决方法）

    spring中拦截器主要分两种,一个是HandlerInterceptor,一个是MethodInterceptor 一.HandlerInterceptor HandlerInterceptor是s ...

  8. 经测试，foreach循环比linq的效率高

  9. kth min_max容斥

    题解: 普通的$min-max$容斥是用来求最后出现元素的期望之类的 $kth min-max$容斥进一步解决倒数第k个出现的元素的期望 给出公式: $kthmax(S)=\sum\limits_{T ...

  10. SQL 性能优化 总结

    SQL 性能优化 总结 (1)选择最有效率的表名顺序(只在基于规则的优化器中有效): ORACLE的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句中写在最后的表(基础表 driving ...