在web端项目开发过程中,经常会用到浏览器的版本及网络情况进行监测,下述代码给大家提供了一个思路
// 构建全局环境对象,存储浏览器相关信息,并将其放到window上,便于全局访问
window.Global = {
isMac: navigator.platform.toUpperCase().indexOf("MAC") >= 0,
isWebkit: false,
isChrome: false,
isMozilla: false,
isOpera: false,
isIE: false,
isEdge: false,
isSafari: false,
browserVersion: "",
}
// 检测浏览器及其版本
window.browser = function () {
var t, e = navigator.userAgent,
n = e.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if(/trident/i.test(n[1])){
t = /\brv[ :]+(\d+)/g.exec(e) || [];
return {
name: "IE",
version: t[1] || ""
}
}else if("Chrome" === n[1]){
t = e.match(/\b(OPR|Edge)\/(\d+)/);
if(t !== null){
return {
name: t.slice(1)[0].replace("OPR", "Opera"),
version: t.slice(1)[1]
}
}else{
n = n[2] ? [n[1], n[2]] : [navigator.appName, navigator.appVersion, "-?"];
null != (t = e.match(/version\/(\d+)/i)) && n.splice(1, 1, t[1])
return {
name: n[0],
version: n[1]
}
}
}
}()
// 将相关的检测结果存储到Gloabal全局对象中
Global.isWebkit = "Chrome" === browser.name || "Safari" === browser.name;
Global.isMozilla = "Firefox" === browser.name;
Global.isOpera = "Opera" === browser.name;
Global.isIE = "IE" === browser.name;
Global.isEdge = "Edge" === browser.name;
Global.isChrome = "Chrome" === browser.name;
Global.isSafari = "Safari" === browser.name;
Global.browserVersion = browser.version;
Global.online = false;
// 监听网络在线的事件
window.addEventListener("online", function () {
setTimeout(() => {
console.log("网络连接已建立")
})
})
// 检测网络离线的事件
window.addEventListener("offline", function () {
setTimeout(() => {
console.log("网络连接已断开")
})
})
// 网络变化后执行的回调函数
function linestate(args) {
console.log(args);
}
// 检测网络动态变化后的事件,并增加相关的回调方法
navigator && navigator.connection && navigator.connection.addEventListener("change", function () {
var t = 128 * navigator.connection.downlink;
t < 30 ? setTimeout(function () {
Global.online && linestate('slowline')
}, 10) : Global.online ? linestate('online') : linestate('offline');
})
代码示例来源于微博web端(源码直出)