这里简单谈一下移动端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>
样式如下：
.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();
至此，结束
转载于:https://www.cnblogs.com/sdwrz/p/7200875.html
原文链接：http://www.cnblogs.com/sdwrz/p/7200875.html
日常开发中，我们可能会需要实现类似这样的组件，组件带有弹框
一般都是父盒子【position: relative;】弹框盒子相对父盒子【position: absolute;】
这种做法平时不会有什么问题，但是当有父盒子设置【overflow: hidden;】时，就会出现这种现象
是的，超出的部分已被隐藏了
如果认真观察其他ui库的类似组件的话，你会发现它们都被挂载到body下面去了，所以该组件的父盒子影响不到弹窗的盒子
我们给弹框盒子加上一个ref属性
如果 html 的 font-size: 100px，那字号为0.16rem的字实际为100px * 0.16 = 16px故与不相同时，则会导致iframe页面内的字体字号存在问题。
对于iframe的设定有几个css属性常用
overflow:hidden;width:100%;当这样使用inframe内部中使用overflow，iframe会被撑开，导致width与overflow配合失效，例子（空了再写）
解决办法：iframe中的body设定与iframe同样的width（但不能100%必须是固定的px）
iframe自适应高度，仅修改iframe代码，不用对其他页面进...
iframe使用于移动端其实不少，只是可见的iframe很少。以往我都是用iframe来实现无刷新登录和跨域通信，用来显示内容的地方就是登录那一块。而对于登录来说，登录界面无非，3-4个输入框和1~2个按钮，手机一屏内完全可以显示，所以其实对iframe显示多内容的问题没有过多研究，只知道有以下特性：1.android 2.3的原生浏览器下iframe不仅不可以被控制高度，它同时不会被它外围的di...
点击上方的终端研发部，右上角选择“设为星标”一、前言在过去的几年时间里，移动端web野蛮生长，智能机的Android阵营和IOS阵营分庭抗礼，随之产生了多个系统版本（系统版本多样）；五...
顶层页面内预留用于显示浮层的div(命名为popdiv),且该div内有一预留的iframe，该iframe用于加载浮层内容，命名为popiframe
提供可以直接访问浮...
移动端使用iframe嵌套页面 scrolling:auto，ios出现横向滚动条问题
一、业务需求/及问题点
业务需求:开发移动端项目时,在项目网页内引用第三方网页,为此采用<iframe src=''>标签引入第三方网页
问题一：如何让iframe嵌套页面出现滚动条?
当使用<iframe src='htttps://xxx.com'> 引入第三方页面，此时页面无法出现上下滚动条，
解决思路:需要引入iframe标签的scrolling属性：<iframe src=
你不会还不知道iframe不能嵌入百度首页吧？为了丰富用户体验，我们常常会将其他网站的内容嵌入到自己的网页中。然而，随之而来的是一个常见的问题：Iframe 嵌入网站无法正常使用。你是否也曾遇到过这个困扰，不知道该如何解决呢？文将深入探讨 Iframe 嵌入时可能遇到的若干问题，并为您呈现解决方案。从同源策略、跨域机制到安...
最近在做自己公司平台的项目，架子后台都已经帮忙搭起来了，用的是adminlte后台模板，发现真的是好多bug,主要是嵌套了iframe,说实话非常讨厌iframe这个东西。
然后发现主页竟然忘记加上去了，直接在遍历侧边菜单前加上了$('.iframe_main').attr('src', '/Admin/Home/Dashboard');这个一句，主要是右侧全部都是iframe嵌套的...
