最近做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. Windows 下 exe 服务注册到 service 服务中

    window 下注册 exe 程序.添加到 服务中. window 注册服务方式 一. regsvr 方式 直接在 程序目录执行: Regsvr 32 命令是Windows中控件文件 ( 如扩展名为D ...

  2. 【linux】基础知识

    为什么学习Linux? 服务器大多数都是linux操作系统,学习[上线][运维]是我们前端开发工程师的必备技能.Linux系统和maxOS系统十分类似,所以推荐大家使用max电脑工作. Linux的版 ...

  3. Windows下VSCode编译调试c/c++

    参考链接:  https://blog.csdn.net/c_duoduo/article/details/51615381 支持makefile编译: https://www.cnblogs.com ...

  4. 模组 前后端分离CURD 组件

    js (function () { // {# -------------------------------------------------------------------------- # ...

  5. sublime的Vue语法高亮插件安装

    1.准备语法高亮插件vue-syntax-highlight. 下载地址: https://github.com/vuejs/vue-syntax-highlight 下载页面并下载: 解开压缩包vu ...

  6. RabbitMQ基础知识及Linux安装

    RabbitMQ: RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现. AMQP协议: AMQP,即Advanced Message Qu ...

  7. 修正锚点跳转位置 避免头部fixed固定部分遮挡

    如下锚点标签: <div id="id1"> <span class="kkAnchor"></span> 正文正文正文正文 ...

  8. python 基于机器学习识别验证码

    1.背景    验证码自动识别在模拟登陆上使用的较为广泛,一直有耳闻好多人在使用机器学习来识别验证码,最近因为刚好接触这方面的知识,所以特定研究了一番.发现网上已有很多基于machine learni ...

  9. 天梯赛 L1-043 阅览室

    L1-043 阅览室 (20 分) 天梯图书阅览室请你编写一个简单的图书借阅统计程序.当读者借书时,管理员输入书号并按下S键,程序开始计时:当读者还书时,管理员输入书号并按下E键,程序结束计时.书号为 ...

  10. 金蝶K3 WISE BOM多级展开_BOM成本表

    /****** Object: StoredProcedure [dbo].[pro_bobang_BOMCost] Script Date: 07/29/2015 16:09:11 ******/ ...