2020-08-22

iframe弹窗过滤遮罩

============
作者:G.flower

日期:2020-08-15

效果截图：


提前准备一个bofang.png图标，尺寸40x40，在播放器中请设置30x30，否则有少数大幅广告无法遮盖。将以下代码添加到播放页面中，一般这种移动端的webAPP在PC端的解析线路是没有嵌入式广告的，所以针对的是移动设备的屏蔽，当然，以下预留了PC端的屏蔽样式位置，只需要按照如下操作来弄就行：1.将以下包含的CSS样式
@media screen and (max-width: 600px) { /*当屏幕小于600px时，应用下面的CSS样式*/
复制到
@media screen and (min-width: 600px) { /*当屏幕大于600px时，应用下面的CSS样式*/
的下面。
然后调整所有遮罩的top、left、width、height四个值。
CSS部分：
<style> //广告屏蔽遮罩 @media screen and (min-width: 600px) { /*当屏幕大于600px时，应用下面的CSS样式*/ .chongzai{ display:none;//默认PC端隐藏}} @media screen and (max-width: 600px) { /*当屏幕小于600px时，应用下面的CSS样式*/ .chongzai{ position: absolute;//忽略行高，使用固定坐标 background-color:#E6E6E6; padding:10px 5px 10px 5px; border-radius:0px; z-index:2;} .chongzai1{ top:10%; left:0px; width:100%; height:29%;} .chongzai2{ top:46.5%; left:0px; width:100%; height:35%;} .chongzai3{ top:35%; left:0px; width:46.5%; height:20%;} .chongzai4{ top:35%; left:53%; width:47%; height:20%;} .chongzaia{ position: absolute; padding:10px 5px 10px 5px; border-radius:50px; z-index:3; text-align:center;} .chongzai5{ top:20%; left:25%; width:50%; height:11%; color:green; font-size:25px; } .chongzai6{ top:55%; left:11%; width:78%; height:10%; color:yellow; font-size:16px; background-color:red; } .chongzai7{ top:73.5%; left:22%; width:55%; height:5%; color:yellow; line-height:1px; font-size:12px; background-color:red; border-radius:50px; } .jz{ position: absolute; padding:10px 5px 10px 5px; border-radius:50px; text-align:center;} .jiazai{ top:37%; left:25%; width:50%; height:10%; color:#AC58FA; font-size:18px; background-color:#F6CEEC; border-radius:5px; z-index:7; } .jiazai2{ top:37%; left:25%; width:50%; height:10%; color:#AC58FA; font-size:18px; background-color:#F6CEEC; border-radius:5px; z-index:6; } .jiazai3{ top:37%; left:25%; width:50%; height:10%; color:#AC58FA; font-size:18px; background-color:#F6CEEC; border-radius:5px; z-index:5; } .jiazai4{ top:37%; left:25%; width:50%; height:10%; color:#AC58FA; font-size:18px; background-color:#F6CEEC; border-radius:5px; z-index:4; } .chuantou{ pointer-events: none; //点击穿透，让播放按钮的点击事件穿透到播放器层} .bo1{ top:35%; left:25%; width:50%; height:10%; color:#AC58FA; font-size:18px; border-radius:5px; z-index:3; } #hide{ display:none; }} </style>
html部分：
<a class="jz jiazai" id="jiazai1">加载中 [计时0.5秒]</a> <a class="jz jiazai2" id="jiazai2">加载中 [计时1.0秒]</a> <a class="jz jiazai3" id="jiazai3">加载中 [计时2.0秒]</a> <a class="jz jiazai4" id="jiazai4">加载完毕!请稍后...</a> <div class="jz bo bo1 chuantou" id="hide"><img src="./../../bofang.png" width="30" height="30" /></div> <a class="chongzai chongzai1"> </a> <a class="chongzai chongzai2"> </a> <a class="chongzai chongzai3"> </a> <a class="chongzai chongzai4"> </a> <a class="chongzaia chongzai5">请点击播放按钮</a> <a class="chongzaia chongzai6">温馨提示：已为您屏蔽所有第三方广告!</a> <a class="chongzaia chongzai7">技术过滤:G.flower </a> <!--广告遮罩结束-->
js部分：
<script type="text/javascript">setTimeout(function(){$("#jiazai1").hide()},2000)//1000是1秒//在2000秒后解除第一层遮罩，hide是display:none属性的ⅠD名，可以改成任意名。setTimeout(function(){$("#jiazai2").hide()},4000)//1000是1秒setTimeout(function(){$("#jiazai3").hide()},6000)//1000是1秒setTimeout(function(){$("#jiazai4").hide()},9000)//1000是1秒</script><!--延时显示播放按钮--><script language='javascript' type='text/javascript'>setTimeout(function(){ document.getElementById('hide').style.display = "block";},8000);</script> 修改iframe的JS部分：也可以不用全部修改，只需要在iframe中插入一个z-index="999"<script type="text/javascript"> function run(){ var s = document.getElementById("timer"); if(!s){ return false; }else{ s.innerHTML = s.innerHTML * 1 - 1; } } window.setInterval("run();", 1000); $('#cms_player').html('<div style="text-align:center;width:100%;"></div><div id="timer">0</div>'); //设置延时函数 function adsUp(){ $("#cms_player").html('<iframe id="video" src="这里是你的解析URL" style="width:100%;border:none" allowtransparency="true" allowfullscreen="true" frameborder="0" scrolling="no" z-index="999"></iframe><a style="display:none" id="videourlgo" href="<?php echo $furl;?>"></a>'); } //五秒钟后自动收起 var t = setTimeout(adsUp,0); </script>