js获取浏览器信息以及判断是否是微信
2016-12-21 21:33
609 查看
最近项目开始做H5移动端,但是如果H5的页面被用户使用电脑浏览器打开的话就会失去原来的样子,所以找了一段代码,可以判断浏览器是否是移动设备上的,这样我们就可以在用户使用电脑浏览器访问H5页面的时候对用户进行提醒或者直接跳转到电脑版的网页了。
<script type="text/javascript">
/*
* 智能机浏览器版本信息:
*
*/
var browser = {
versions: function() {
var u = navigator.userAgent, app = navigator.appVersion;
return {//移动终端浏览器版本信息
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部
wechar:u.indexOf('MicroMessenger') > -1
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
console.log("语言版本: " + browser.language);
console.log("ios终端: " + browser.versions.ios);
console.log("android终端: " + browser.versions.android);
console.log("是否为iPhone: " + browser.versions.iPhone);
console.log("是否iPad: " + browser.versions.iPad);
console.log("是否微信: " + browser.versions.wechar);
console.log(navigator.userAgent);
</script>下面看一下效果
PC浏览器打开
![](https://img-blog.csdn.net/20161221214333081?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvanh6cmY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
android浏览器打开
![](https://img-blog.csdn.net/20161221214444691?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvanh6cmY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
ios浏览器打开
![](https://img-blog.csdn.net/20161221214451498?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvanh6cmY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
使用android版微信打开
![](https://img-blog.csdn.net/20161221220208475?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvanh6cmY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
ios微信端打开
![](https://img-blog.csdn.net/20161221220220819?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvanh6cmY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
我们都知道在微信中是没办法下载东西的,这是我们就可以利用代码去判断页面是否是在微信中打开的,如果是在微信中打开的,我们可以提示用户使用浏览器打开下载,具体效果如下
![](https://img-blog.csdn.net/20161221220710702?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvanh6cmY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
判断的方法
if(browser.versions.wechar){
if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {
html<div class="wxtip" id="JweixinTip">
<span class="wxtip-icon"></span>
<p class="wxtip-txt">点击右上角<br/>选择在浏览器中打开</p>
</div>css
weixin-tip.png图片
![](https://img-blog.csdn.net/20161221221742112?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvanh6cmY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
图片是透明的,可能看不懂,右键点图片另存为就可以了
这个判断是否是在微信中也可以结合上一篇文章获取微信公众号一键关注链接来做一些事情。如果用户是在微信中点击H5页面中的关注按钮,我们就可以直接跳转到关注的页面,引导用户关注我们的公众号。如果不是在微信中,我们可以弹出一个二维码,提示用户进行扫码关注
效果图 非微信中
![](https://img-blog.csdn.net/20161221222743885?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvanh6cmY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
微信中 点击按钮就可以直接跳转到关注页面了
<script type="text/javascript">
/*
* 智能机浏览器版本信息:
*
*/
var browser = {
versions: function() {
var u = navigator.userAgent, app = navigator.appVersion;
return {//移动终端浏览器版本信息
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部
wechar:u.indexOf('MicroMessenger') > -1
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
console.log("语言版本: " + browser.language);
console.log("ios终端: " + browser.versions.ios);
console.log("android终端: " + browser.versions.android);
console.log("是否为iPhone: " + browser.versions.iPhone);
console.log("是否iPad: " + browser.versions.iPad);
console.log("是否微信: " + browser.versions.wechar);
console.log(navigator.userAgent);
</script>下面看一下效果
PC浏览器打开
android浏览器打开
ios浏览器打开
使用android版微信打开
ios微信端打开
我们都知道在微信中是没办法下载东西的,这是我们就可以利用代码去判断页面是否是在微信中打开的,如果是在微信中打开的,我们可以提示用户使用浏览器打开下载,具体效果如下
判断的方法
if(browser.versions.wechar){
if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {
//代表在ios微信中 //document.getElementById('JweixinTip').style.display='block'; }else if (browser.versions.android) {
//代表在android微信中 //document.getElementById('JweixinTip').style.display='block'; } }
document.getElementById('JweixinTip').onclick=function(){ this.style.display='none'; }提示内容的代码如下
html<div class="wxtip" id="JweixinTip">
<span class="wxtip-icon"></span>
<p class="wxtip-txt">点击右上角<br/>选择在浏览器中打开</p>
</div>css
.wxtip{background: rgba(0,0,0,0.8); text-align: center; position: fixed; left:0; top: 0; width: 100%; height: 100%; z-index: 1998; display: none;} .wxtip-icon{width: 52px; height: 67px; background: url(../images/weixin-tip.png) no-repeat; display: block; position: absolute; right: 20px; top: 20px;} .wxtip-txt{margin-top: 107px; color: #fff; font-size: 16px; line-height: 1.5;}
weixin-tip.png图片
图片是透明的,可能看不懂,右键点图片另存为就可以了
这个判断是否是在微信中也可以结合上一篇文章获取微信公众号一键关注链接来做一些事情。如果用户是在微信中点击H5页面中的关注按钮,我们就可以直接跳转到关注的页面,引导用户关注我们的公众号。如果不是在微信中,我们可以弹出一个二维码,提示用户进行扫码关注
效果图 非微信中
微信中 点击按钮就可以直接跳转到关注页面了
相关文章推荐
- 社交巨头三国杀:微信、WhatsApp、Line到底有啥区别?
- JQuery1——基础($对象,选择器,对象转换)
- Android Manifest 用法
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 只需四个步骤几行代码,即可快速实现直播弹幕功能
- Ubuntu Touch 升级即将来袭!
- Basilisk:一个有着经典的外观和扩展的 Firefox 复刻
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 微信悄悄升级群聊功能:个人微信营销号的福音
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 突击部队拼多多
- 我是运营,我没有假期
- 在 Linux 中如何移动文件