巧用iframe做浮层对iframe的非议太多了。幸运的是，标准并没有放弃它。其实还是有点用的。在开发产品的时候，我们不得不放弃一些东西来换取效率。我们的需求是在某些特定场景下，在现有页面上做一个弹窗。这是一种常见的操作方法。虽然我觉得是粗暴的操作，但是需求还是要做的。原平台页面：新增运营活动页面：合成效果图：最后一张图不就是一个简单的弹出层吗？但是这个bulletlayer里面有很多逻辑，而且是通过特殊的系统配置生成的，包括领取优惠券的逻辑。与现有页面基本无关，只是一个临时的操作活动。不需要在主页面的逻辑中加入这样的活动逻辑。所以最好将两个页面合并在一起。设置这个临时iframe的样式，使iframe覆盖整个浏览器窗口。这里可以先将透明度设置为0，等iframe加载满后再显示，防止iframe加载失败或者样式抖动，导致用户体验不友好：.float-iframe{位置：绝对；宽度：100%；高度：100%；顶部：0；左：0；边界：0；z-指数：1000；opacity:0;}iframe加载后不透明，平台页面背景被遮挡。这里需要设置iframe的body样式：background-color:rgb(0,0,0,0.6);设置透明度为0.6，生成透明遮罩层，也省去自己写遮罩层的麻烦。将以下样式添加到主体以将其设置为完全透明：background-color:transparent;这种方式需要自己添加遮罩层，否则视觉上会出现两个页面的元素叠加在一起的感觉。做的过程中发现页面可以滑动。最理想的情况当然是锁定页面。这时候想到的是阻止touchmove事件document.addEventListener('touchmove',function(e){e.preventDefault();},false)发现这样不行，还是可以在iframe里面滑动页面区域，在主页面上，但是不能滑动，说明对iframe无效。唯一的解释是iframe中发生的touch事件只是在iframe内部冒泡，不会传递给父页面，所以不能阻止父页面滑动。如果这个猜想成立，下面的代码应该生效iframe.onload=function(){vardoc=iframe.contentDocument;doc.addEventListener('touchmove',function(e){e.preventDefault();},false)};接下来的问题是如何关闭iframe。在页面上我们设计了一个X按钮来关闭。这里我们要分不同的场景来做，一种是同源，一种是不同源。我们两个页面是同源的，做起来比较容易。父页面直接控制子页面，完全控制权限。vardoc=iframe.contentDocument;doc.querySelector('#_js_close').addEventListener('click',function(){document.body.removeChild(iframe);});如果是不同的来源，会比较麻烦，需要两个页面之间进行通信。//父页面http://parent.comwindow.addEventListener("message",receiveMessage,false);函数receiveMessage（事件）{varorigin=event.origin||事件.originalEvent.origin;//域白名单if(origin!=="http://child.com")return;if(event.data==='closepage'){document.body.removeChild(iframe);}}//子页面http://child.comwindow.postMessage('closepage','http://parent.com');好吧，完成这样的需求需要半天时间。如果从头开始写，估计要几天时间，主要不是显示弹层的逻辑，而是弹层本身的逻辑。虽然使用iframe不是最好的解决方案，但对于这种情况来说是最好的。本文为原创文章，知识点可能会经常更新并修正部分错误，转载请保留原始出处，便于追溯，谢谢合作。本文博客地址：http://www.iamaddy.net/2017/0...
