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正则表达式之验证密码身份证手机号的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下2017-10-10
本文通过实例代码演示如何实现IOS搜索栏及搜索关键字高亮，效果很棒，小编觉得对大家的学习会很有帮助，现在分享给大家，有需要的可以参考学习。2016-08-08
本文主要给大家讲解的是在IOS中MD5的加密方式，及详细使用方法。有需要的小伙伴可以参考下2016-06-06
这篇文章主要介绍了IOS10 远程推送适配详细介绍的相关资料,iOS10推送新增了UserNotifications Framework，这里主要介绍如何实现远程推送，需要的朋友可以参考下2016-12-12
这篇文章主要为大家详细介绍了IOS实现勾选"记住密码"整体button效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
这篇文章主要介绍了IOS 通讯录的访问和修改的实现的相关资料,需要的朋友可以参考下2017-06-06
本文主要介绍了iOS中禁止按钮在一定时间内连续点击的方法，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
在Objective-c开发程序的时候,有专门的日志操作类NSLog,它将指定的输出,输出到(stderr),我们可以利用Xcode的日志输出窗口，下面这篇文章主要给大家介绍了关于iOS中日志同步获取NSLog重定向以及其他的相关资料，需要的朋友可以参考下。2017-12-12
这篇文章主要为大家详细介绍了iOS禁止所有输入法表情的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
本文主要介绍了UIWebView控件中字体大小和字体样式的修改，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
最新评论