在微信打开显示遮罩

时间：2023-10-07 21:50:10 来源：网络编辑：本站点击：

原理

我们首先将下原理
研究发现微信的UA中一定带有MicroMessenger并且其他浏览器UA没有
所以我们检查UA如果有那么就让他有遮罩
那么遮罩怎么实现呢？我们在JavaScript中是不好让加上遮罩的
所以我们写一个在最上层的遮罩，用JavaScript让他沉下去

0x00分析UA

获取UA

let url = navigator.userAgent.toLowerCase();
//使用toLowerCase将字符串全部转为小写方便我们判断使用

UA中如果有MicroMessenger

if (url.indexOf("micromessenger") > -1) {
//单独判断微信内置浏览器
}

UA中如果有iPhone|iPod|iPad|Mac

if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { //判断是否是iOS

}

UA中如果有android

if (navigator.userAgent.match(/android/i)) { //判断是否是Android

}

如果都不是

else if(true){

}

完整的

let url = navigator.userAgent.toLowerCase();
//使用toLowerCase将字符串全部转为小写方便我们判断使用
if (url.indexOf("micromessenger") > -1) {
//单独判断微信内置浏览器
if (navigator.userAgent.match(/(iPhone|iPod|iPad|Mac);?/i)) { //判断是否是iOS

}
if (navigator.userAgent.match(/android/i)) { //判断是否是Android

}
}else if(true){

}

0x01 div遮罩

我们分别写iPhone和Android的div遮罩
Android

<div id="WeChatAndroid" style="position: absolute; width: 100%; height: 100000%; left: 0px; top: 0px; background: #434343;opacity: 0.9; filter: alpha(opacity=40);z-index:99999999999;">

</div>

iPhone

<div id="WeChatiPhone" style="position: absolute; width: 100%; height: 100000%; left: 0px; top: 0px; background: #434343;opacity: 0.9; filter: alpha(opacity=40);z-index:99999999999;">

</div>

里面内容自由发挥
我用的是
Android

<img style="width: 100%" src="https://zigao-oss.oss-accelerate.aliyuncs.com/web/blog.zigao.info/assets/uploads/image/wechat/android.png">

iPhone

<img style="width: 100%" src="https://zigao-oss.oss-accelerate.aliyuncs.com/web/blog.zigao.info/assets/uploads/image/wechat/iphone.png">

这两张图片我放出来

iPhone Android

遮罩下沉

iPhone遮罩下沉

document.getElementById("WeChatiPhone").style.display='none';

Android遮罩下沉

document.getElementById("WeChatAndroid").style.display='none';

成品

如果是iPhone就让Android遮罩下沉
如果是Android就让iPhone遮罩下沉
如果都不是就让两个都下沉

所以最后是这样


<div id="WeChatiPhone" style="position: absolute; width: 100%; height: 100000%; left: 0px; top: 0px; background: #434343;opacity: 0.9; filter: alpha(opacity=40);z-index:99999999999;"><img style="width: 100%" src="https://zigao-oss.oss-accelerate.aliyuncs.com/web/blog.zigao.info/assets/uploads/image/wechat/iphone.png"></div>
<div id="WeChatAndroid" style="position: absolute; width: 100%; height: 100000%; left: 0px; top: 0px; background: #434343;opacity: 0.9; filter: alpha(opacity=40);z-index:99999999999;"><img style="width: 100%" src="https://zigao-oss.oss-accelerate.aliyuncs.com/web/blog.zigao.info/assets/uploads/image/wechat/android.png"></div>
<script>
let url = navigator.userAgent.toLowerCase();
//使用toLowerCase将字符串全部转为小写方便我们判断使用
if (url.indexOf("micromessenger") > -1) {
//单独判断微信内置浏览器
if (navigator.userAgent.match(/(iPhone|iPod|iPad|Mac);?/i)) { //判断是否是iOS
document.getElementById("WeChatAndroid").style.display='none';
}
if (navigator.userAgent.match(/android/i)) { //判断是否是Android
document.getElementById("WeChatiPhone").style.display='none';
}
}else if(true){
document.getElementById("WeChatAndroid").style.display='none';
document.getElementById("WeChatiPhone").style.display='none';
}
</script>

效果图

iPhone效果 Android效果

栏目导航

最新推荐

python内建函数大…	点击按钮(button)…
帝国cms网络视频引…

相关文章

栏目更新

栏目热门