ios不支持iframe的完美解决方法(兼容iOS&安卓)_iosiframe附件会自动跳转 - CSDN文库

118 浏览量更新于2023-05-03 评论收藏 47KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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中使用schema协议调用APP和使用iframe打开APP的例子IOS上iframe的滚动条失效的解决办法ios设

备使用iframe宽度超出屏幕的解决方法

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

评论0

weixin_38637918

粉丝: 9
资源: 946

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈