Rumah >hujung hadapan web >html tutorial >ios 不支持 iframe 该怎么解决?
ios 不支持 iframe 该怎么解决?
- 零下一度asal
- 2017-07-20 13:27:563770semak imbas
iframe的怪异问题很多，Android有很多手机也不正常。
不推荐在app上使用iframe。
双webview更安全，即把那个你原本放在iframe里的页面载入一个webview里，append到主页面里
具体表现为，当嵌套的子页面的高度大于父页面的高度，且子页面中有触发弹框事件时，这时，如果子页面高度远远大于父页面高度，就会出现弹框找不到的情况，其实可能是在视口以下，弹框的位置只是相对于子页面来定位，并没有相对于视口定位。尝试了好多种方法，均不理想，而安卓系统则表现良好，于是想到，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?1.1.11"></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) {//安卓终端使用iframevar 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>弄了蛮久，记录下自己的成长，如果有遇到类似问题的小伙伴，可以看看，也希望又看到可以改进的地方，多多指教。
Atas ialah kandungan terperinci ios 不支持 iframe 该怎么解决?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bootstrap洼地是什么？Artikel seterusnya：Bootstrap面板的详细介绍