这里简单谈一下移动端h5编程中碰到的iframe的bug,具体详述如下:
在项目中,我主要使用iframe做弹出层,在iframe的外部放一层div,控制这个div,通过删除或追加div来决定是否使用iframe,iframe外层包div的做法也是很多博客里提倡用的做法。
页面结构如下:
<div class="iframe_pop_wrap">
<iframe scrolling="no" allowtransparency="true" name="pop_iframe" id="pop_iframe" src="demo_iframe.html" frameborder="0">
</iframe>
</div>
样式如下:
.iframe_pop_wrap{position: absolute;top:0;left:0;100%;bottom:0;z-index:11;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
}
.iframe_pop_wrap iframe{position: absolute;top:0;left:0;100%;height:100%;overflow: hidden;background: transparent;}
在demo_iframe.html页面中页面布局如下:
<div class="modalCommonBg">
</div>
<div class="modalCommonBox">
</div>
我最开始时对modalCommonBg、modalCommonBox使用了一个fixed的定位方式,使用苹果手机打开时,弹窗全部消失了,我开始认识到在一个ios为操作系统的Safari浏览器或微信浏览器中,iframe的src所指向的页面内部不能使用fixed定位。于是,我开始想办法用绝对定位换掉固定定位。但当我使用absolute定位时,内容显示出来了,但是在页面的底部,有一部分内容消失了,由此我渐渐向着将内容展示出来的方向靠。在这个过程中,我将demo_iframe.html页面中设置了如下样式:
html {
height: 100%;
100%;
overflow:hidden;
}
body {
height: 100%;
100%;
overflow:hidden;
}
在此之后,我发现页面的内容出现了。
当然在解决这个问题的过程中,我和同事商量也找到了一种用于替换iframe的方法,只需要做样式的隔离即可。
使用ajax方式请求一个div内部内容,这个div内部内容只要不含有<html>,<body><head>这三者即可。
$.ajax({ url: '/package/sunglassSkuPanel.html?packageid=' + packageid + "&skuid=" + skuid, success: function (html) { var popupHTML = '<div class="popup popup-info-content">' + html + '</div>'; $("body").append(popupHTML); GLOBAL['ctrlOverflow'].setHtmlOverflowHidden(); } });
至此,结束