巧用iframe做浮层

巧用iframe做浮层

iframe的诟病太多了，还好标准没有废弃它，其实还是有点用的。在开发产品的时候，我们不得不舍弃一些东西来换取效率。

我们的需求是，在某些特定的场景下在现有的页面做一个弹窗，这是常有的运营手段，虽然我觉得是一种粗鲁的运营，但需求还是得做啊。

原有的平台页面：

新增的运营活动页面：

合成的效果图：

看到最后这个图不就是个简单的弹层吗？

但这个弹层的逻辑不少啊，而且是由专门的系统配置生成，包括领取卡券逻辑。跟现有的页面基本没关系，而且只是一个临时的运营活动。没必要在主页面的逻辑中专门加一个这样的活动逻辑。

所以最好是将两个页面合成到一起。

设置这个临时iframe的样式使得iframe铺满整个浏览器窗口，这里可以先将透明度设置为0，等到iframe完全加载再显示出来，以免iframe加载失败或者样式抖动导致用户体验就不太友好：

.float-iframe{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 0;
    z-index: 1000;
    opacity: 0;
}

iframe加载出来后发现并不是透明的，平台页面的背景被遮盖了。这里需要设置iframe的body样式：

 background-color:rgb(0,0,0,0.6);

设置透明度为0.6，可以生成一个透明度的蒙层，这样也可以免去自己再去写一个遮罩层。
在body上加上下面的样式，可以设置完全透明：

 background-color: transparent;

这样就需要自己去加遮罩层，不然两个页面的元素视觉上看起来会叠加到一起了。

做的过程发现页面是可以滑动的，理想的情况当然是锁住页面。这个时候想到的是阻止touchmove事件

document.addEventListener('touchmove', function(e){
    e.preventDefault();
},false)

发现这样是不生效的，在iframe的页面区域照样可以滑动，在主页面却不能滑动，说明对iframe是无效的。唯一的解释就是发生在iframe的touch事件只在iframe内部冒泡，并不会传递到父页面，所以是不能阻止父页面的滑动，如果这个猜想成立的话，以下代码应该会生效

iframe.onload = function(){
    var doc = iframe.contentDocument;
    
    doc.addEventListener('touchmove', function(e){
        e.preventDefault();
    },false)
};

这样设置以后，果然就不能滑动了。

接下来的问题，怎么去关闭iframe。在页面上我们设计了一个X按钮，用来关闭。这里要分场景来做，一种是同源，另外是不同源。

我们的这两个页面是同源，就比较好做了，通过父页面直接控制子页面，完全的控制权限。

var doc = iframe.contentDocument;
doc.querySelector('#_js_close').addEventListener('click', function(){
    document.body.removeChild(iframe);
});

如果是不同源，会比较麻烦点，需要两个页面间的通信。

// 父页面 http://parent.com
window.addEventListener("message", receiveMessage, false);

function receiveMessage(event){
  var origin = event.origin || event.originalEvent.origin; 
  // 域名白名单
  if (origin !== "http://child.com") return;
  if(event.data === 'closepage'){
    document.body.removeChild(iframe);
  }
}

// 子页面 http://child.com
window.postMessage('closepage', 'http://parent.com');

好了，完成这样的需求，半天都不用。如果从头开始写，估计要花几天，主要不是显示弹层逻辑，而是弹层里本身的逻辑。用iframe虽然不是最好的方案，但对于本案例来是最佳的。

本文为原创文章，可能会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，谢谢合作。
本文的博客地址：http://www.iamaddy.net/2017/0...