ios 不支持 iframe 该怎么解决?

零下一度 原创: 2017-07-20 13:27:56 3117浏览

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>

弄了蛮久，记录下自己的成长，如果有遇到类似问题的小伙伴，可以看看，也希望又看到可以改进的地方，多多指教。

以上就是ios 不支持 iframe 该怎么解决?的详细内容，更多请关注php中文网其它相关文章！

iframe 解决方案不支持 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：Bootstrap洼地是什么？下一条：Bootstrap面板的详细介绍