最近做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. day 15 - 2 内置函数练习

    内置函数练习 编写 sql 查询语句功能 文件内容: 1,Eva,22,13651054608,IT2,Vera,23,13304320533,Tearcher3,Renault,25,1333235 ...

  2. java.util.zip.ZipException: invalid entry size

    启动maven项目时报java.util.zip.ZipException: invalid entry size (expected 7612 but got 5955 bytes) 可能是mave ...

  3. for 循环 与forEach 里面return 的区别

    for 循环里面 return 可以直接终止 跳出 循环 forEach 是中断本次循环 直接 下一个循环 forEach想要取到值之后 直接跳出循环 可以用 try catch let arr = ...

  4. MapReduce输出文件名更改

    默认情况下生成的文件名是part-r-00000格式,想要自定义生成输出文件名可以使用org.apache.hadoop.mapreduce.lib.output.MultipleOutputs类用来 ...

  5. 有趣的F-String

    F-String 让人上瘾 一个工具脚本的例子 https://www.pydanny.com/python-f-string-are-fun.html 在Python3.6的发布中,我们看到他们采纳 ...

  6. 【easy】110. Balanced Binary Tree判断二叉树是否平衡

    判断二叉树是否平衡 a height-balanced binary tree is defined as a binary tree in which the depth of the two su ...

  7. spring MVC如何获取session传值到前台

    Session简单介绍 在WEB开发中,服务器可以为每个用户浏览器创建一个会话对象(session对象),注意:一个浏览器独占一个session对象(默认情况下).因此,在需要保存用户数据时,服务器程 ...

  8. php 的文件操作类

    <?php header('Content-type:text/html;charset=utf8'); Class FILE { private static $path; private s ...

  9. 使用SqlServer_Profiler跟踪慢查询

    使用SQLProfiler(事件探查器)跟踪数据库操作及慢查询 1:应用程序连接SQL SERVER数据库服务器: 2:打开SQL Profiler开启数据库事件跟踪: (1):打开SQL Serve ...

  10. python模拟鼠标键盘操作 GhostMouse tinytask 调用外部脚本或程序 autopy右键另存为

    0.关键实现:程序窗口前置 python 通过js控制滚动条拉取全文 通过psutil获取pid窗口句柄,通过win32gui使程序窗口前置 通过pyauto实现右键菜单和另存为操作 1.参考 aut ...