摘要：巧用做浮层的诟病太多了，还好标准没有废弃它，其实还是有点用的。做的过程发现页面是可以滑动的，理想的情况当然是锁住页面。父页面域名白名单子页面好了，完成这样的需求，半天都不用。用虽然不是最好的方案，但对于本案例来是最佳的。
巧用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...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/83021.html
摘要：巧用做浮层的诟病太多了，还好标准没有废弃它，其实还是有点用的。做的过程发现页面是可以滑动的，理想的情况当然是锁住页面。父页面域名白名单子页面好了，完成这样的需求，半天都不用。用虽然不是最好的方案，但对于本案例来是最佳的。 巧用iframe做浮层 iframe的诟病太多了，还好标准没有废弃它，其实还是有点用的。在开发产品的时候，我们不得不舍弃一些东西来换取效率。 我们的需求是，在某些特定...
摘要：在中巧用解决跳转到第三方平台时不能回调的问题比如支付在开发中遇到不少的坑，绝大部分解决了但是在我们的中如果跳转到第三方网站上时，那么问题来了此时我们的是不能监听到你在其它网站上的事件的，所以当你想要回退到我们自己上时请紧握你的蛋小编在开发这 在ionic中巧用iframe解决跳转到第三方平台时不能回调的问题－比如支付 在ionic开发中遇到不少的坑，绝大部分解决了但是在我们的app...
阅读 2457·2021-11-25 09:43
阅读 420·2021-11-12 10:36
阅读 4173·2021-11-08 13:18
阅读 2026·2021-09-06 15:00
阅读 2861·2019-08-30 15:56
阅读 797·2019-08-30 13:57
阅读 1890·2019-08-30 13:48
阅读 1296·2019-08-30 11:13
