前言

  在今年IE终于从半身入土到彻底寄寄,谷歌也做了个违背祖宗的决定,版本号破百。
  但像夸克、UC、百分等浏览器,仍然用着老旧的谷歌内核,也有不少人还用着老版本的谷歌浏览器、Edge。像我学校的机房,仍用着老旧的44版Edge。

  老旧的浏览器不仅让兼容性较低的网站样式爆炸(没错,说的就是我站(bushi)),更不是大势所趋。样式爆炸也会给访客留下不好的印象,为了避免这种情况,合理甩锅(嗯对没错)给浏览器非常双赢。可以每天检测一次浏览器版本号然后弹窗。


实现

  把这JS找个地方塞进去,弹窗调用butterfly自带的,用其它的替换即可。

老旧浏览器弹窗提醒
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
function browserTC() {
btf.snackbarShow("");
Snackbar.show({
text: '浏览器版本较低,网站样式可能错乱',
actionText: '关闭',
duration: '6000',
pos: 'bottom-right'
});
}
function browserVersion() {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //Edge浏览器
var isFirefox = userAgent.indexOf("Firefox") > -1; //Firefox浏览器
var isOpera = userAgent.indexOf("Opera")>-1 || userAgent.indexOf("OPR")>-1 ; //Opera浏览器
var isChrome = userAgent.indexOf("Chrome")>-1 && userAgent.indexOf("Safari")>-1 && userAgent.indexOf("Edge")==-1 && userAgent.indexOf("OPR")==-1; //Chrome浏览器
var isSafari = userAgent.indexOf("Safari")>-1 && userAgent.indexOf("Chrome")==-1 && userAgent.indexOf("Edge")==-1 && userAgent.indexOf("OPR")==-1; //Safari浏览器
if(isEdge) {
if(userAgent.split('Edge/')[1].split('.')[0]<90){
browserTC()
}
} else if(isFirefox) {
if(userAgent.split('Firefox/')[1].split('.')[0]<90){
browserTC()
}
} else if(isOpera) {
if(userAgent.split('OPR/')[1].split('.')[0]<80){
browserTC()
}
} else if(isChrome) {
if(userAgent.split('Chrome/')[1].split('.')[0]<90){
browserTC()
}
} else if(isSafari) {
//不知道Safari哪个版本是该淘汰的老旧版本
}
}
//2022-10-29修正了一个错误:过期时间应使用toGMTString(),而不是toUTCString(),否则实际过期时间在中国差了8小时
function setCookies(obj, limitTime) {
let data = new Date(new Date().getTime() + limitTime * 24 * 60 * 60 * 1000).toGMTString()
for (let i in obj) {
document.cookie = i + '=' + obj[i] + ';expires=' + data
}
}
function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
if(getCookie('browsertc')!=1){
setCookies({
browsertc: 1,
}, 1);
browserVersion();
}


后记

  样式爆炸首先甩锅(