在微信打开显示遮罩

Author： Zi_Gao
发布时间：May 3, 2020
2736 views
4 comments
2391 words
Categories：网站维护

## 前言

我之前是写了一篇在微信打开弹出提示
但是总觉得不是很好
所以我研究了一下，写了个新的

## 正文

### 原理

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

### 0x00分析UA

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

UA中如果有`MicroMessenger`
```js
if (url.indexOf("micromessenger") > -1) {
//单独判断微信内置浏览器
}
```

UA中如果有`iPhone|iPod|iPad|Mac`
```js
if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { //判断是否是iOS

}
```

UA中如果有`android`
```js
if (navigator.userAgent.match(/android/i)) { //判断是否是Android

}
```

如果都不是
```js
else if(true){

}
```

完整的
```js
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
```html
<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
```html
<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
```html
<img style="width: 100%" src="https://assets.zigao.info/www.zigao.info/article/image/wechat/android.png">
```

iPhone
```html
<img style="width: 100%" src="https://assets.zigao.info/www.zigao.info/article/image/wechat/iphone.png">
```
这两张图片我放出来
<div class='album_block'>

[album]

![iPhone][1]
![Android][2]
[/album] </div>

### 遮罩下沉

iPhone遮罩下沉
```js
document.getElementById("WeChatiPhone").style.display='none';
```
Android遮罩下沉
```js
document.getElementById("WeChatAndroid").style.display='none';
```

### 成品

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

所以最后是这样

```html

<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://assets.zigao.info/www.zigao.info/article/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://assets.zigao.info/www.zigao.info/article/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>
```

## 效果图
<div class='album_block'>

[album]

![iPhone效果][3]
![Android效果][4]
[/album] </div>

[3]: https://assets.zigao.info/www.zigao.info/article/2020/05/3396276813.webp
  [4]: https://assets.zigao.info/www.zigao.info/article/2020/05/2325968483.webp

Last modification：July 8, 2022

大哥给点钱吧~ヽ(･ω･´ﾒ)(微信支付宝 QQ都是一个码哦～

4 comments

听风君
May 19, 2020

滴！访客卡！打卡时间：上午9:41:34，请上车的乘客系好安全带~

Reply
金石为开
May 9, 2020

没有效果图，如果配上的话就完美了

Reply
一只小物块
May 8, 2020

哇，正好需要，不知道怎么写，十分感谢，顺便请问一下您有没有办法实现QQ内置浏览器的遮罩？并且好像在QQ内置浏览器访问时加上一串代码就可以全屏了，您有没有办法就是判断是QQ内置浏览器之后自动在网址后面加后缀？

Reply
爆胎
May 7, 2020

写得好好哟,支持支持！ ::tieba:Y.tb89:: 骚年,我怀疑你写了一篇假的文章！ ::tieba:Y.tb94:: 滴！访客卡！打卡时间：上午10:55:44，请上车的乘客系好安全带~

Reply

wuli
能做AI训练？
大名鼎鼎的匿名人士
想问问一代如何进入uboot呢
LCY
你们两个互吹是吧（doge）
小意思
这就是呀
王宁
博主有没有遇到过刷完系统到存储卡之后，安装板子上后一直重启的情况？

在微信打开显示遮罩

Zi_Gao • 2020 年 05 月 03 日

## 前言

我之前是写了一篇在微信打开弹出提示
但是总觉得不是很好
所以我研究了一下，写了个新的

## 正文

### 原理

### 0x00分析UA

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

UA中如果有`MicroMessenger`
```js
if (url.indexOf("micromessenger") > -1) {
//单独判断微信内置浏览器
}
```

UA中如果有`iPhone|iPod|iPad|Mac`
```js
if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { //判断是否是iOS

}
```

UA中如果有`android`
```js
if (navigator.userAgent.match(/android/i)) { //判断是否是Android

}
```

如果都不是
```js
else if(true){

}
```

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

}
}else if(true){

}
```

### 0x01 div遮罩

</div>
```

iPhone
```html
<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
```html
<img style="width: 100%" src="https://assets.zigao.info/www.zigao.info/article/image/wechat/android.png">
```

iPhone
```html
<img style="width: 100%" src="https://assets.zigao.info/www.zigao.info/article/image/wechat/iphone.png">
```
这两张图片我放出来
<div class='album_block'>

[album]

![iPhone][1]
![Android][2]
[/album] </div>

### 遮罩下沉

iPhone遮罩下沉
```js
document.getElementById("WeChatiPhone").style.display='none';
```
Android遮罩下沉
```js
document.getElementById("WeChatAndroid").style.display='none';
```

### 成品

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

所以最后是这样

## 效果图
<div class='album_block'>

[album]

![iPhone效果][3]
![Android效果][4]
[/album] </div>

[3]: https://assets.zigao.info/www.zigao.info/article/2020/05/3396276813.webp
  [4]: https://assets.zigao.info/www.zigao.info/article/2020/05/2325968483.webp

在微信打开显示遮罩

Leave a Comment Cancel reply
快来发言吧(ﾉ´▽｀)ﾉ♪

4 comments

简短代码实现网站黑化(夜间模式)

handsome魔改备忘1

在微信打开显示遮罩

检测到微信打开提示"请用浏览器打开"

开往-友链接力handsome侧栏添加修改

Zi-Gao / Talk-zh-Hans Talk - 一个免费的视频通话程序

简短代码实现网站黑化(夜间模式)

Ubuntu的Java多版本共存

自建好看的探针

宝塔踩坑日记

在微信打开显示遮罩

Leave a Comment Cancel reply 快来发言吧(ﾉ´▽｀)ﾉ♪

4 comments

在微信打开显示遮罩

Leave a Comment Cancel reply
快来发言吧(ﾉ´▽｀)ﾉ♪