by addy 原创文章,欢迎转载,但希望全文转载,注明本文地址。

本文地址:http://www.iamaddy.net/2017/05/user-iframe-as-float-panel/

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

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

原有的平台页面:
巧用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/05/user-iframe-as-float-panel/

想要打赏?你的鼓励是我前进的动力! addy打赏二维码

关注个人公众号web_lab,不定期更新一些干货~ web_lab公众号