H5 浏览器环境监测方法总结

143 阅读 0 评论 95 点赞

我是靠谱客的博主俏皮发箍，这篇文章主要介绍H5 浏览器环境监测方法总结，现在分享给大家，希望可以做个参考。

总结一下：H5浏览器环境监测的几种情况：

微信环境监测，【用于是否使用使用微信登录】；
监测当前设备，及版本号；
客户端返回事件；【用于返回上一步时触发效果】

1.微信环境检测

复制代码

1
2
3
4
5
6
7
8
function isWeiXin(){
    var ua = window.navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i) == 'micromessenger'){
        return true;
    }else{
        return false;
    }
}

2.JS判断当前设备，及版本号；

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
console.log(window.navigator.userAgent)//也就是常说的UA，这个里面会把设备的信息打印出来
function gt_iosV() {
// 判断是否 iPhone 或者 iPod
if((navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i))) {
// 判断系统版本号是否大于 4
return Boolean(navigator.userAgent.match(/OS [7,8]_d[_d]* like Mac OS X/i));
} else {
return false;
}
}
gt_iosV();
//可以返回一个布尔值判断是否是你需要的系统

3.页面检测客户端返回事件；（IOS8及以下版本，此方法失效，不应适用）

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(function(){
pushHistory();
window.addEventListener("popstate", function(e) {
    
// alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能
    
// showid("backOut");
}, false);
function pushHistory() {
    
var state = {
        
title: "title",
        
url: "#"
    
};
  
 window.history.pushState(state, "title", "#");
}
});