移动端使用iframe碰到的那些坑
这里简单谈一下移动端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;width: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;width: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%;
width: 100%;
overflow:hidden;
}
body {
height: 100%;
width: 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();
}
});
至此，结束
