最近做很多HTML5的项目,很多页面会通过微信微博等SNS分享出去。在分享页面上提供公司APP的下载。但是在很多应用的浏览器中,点击下载链接无法下载应用。那么针对这些浏览器我们需要给用户提示从safari或者系统自带的浏览器打开分享页面。通过js就可以判断当前页面是在什么浏览器打开的。

以下是一段示例代码,注释中表明了通过JS如何判断是否在微信浏览器打开,是否在QQ空间浏览器,是否在新浪微博打开。当然可以做得更完善一点,再加上判断是在移动设备打开还是在PC端浏览器打开的,更加细分一点,可以判断是在安卓系统的浏览器打开的还是IOS系统浏览器打开的。

if (browser.versions.mobile) {//判断是否是移动设备打开。browser代码在下面
var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
if (ua.match(/MicroMessenger/i) == "micromessenger") {
//在微信中打开
}
if (ua.match(/WeiBo/i) == "weibo") {
//在新浪微博客户端打开
}
if (ua.match(/QQ/i) == "qq") {
//在QQ空间打开
}
if (browser.versions.ios) {
//是否在IOS浏览器打开
}
if(browser.versions.android){
//是否在安卓浏览器打开
}
} else {
//否则就是PC浏览器打开
}

再附上browser的代码,通过以下方法可以判断很多浏览器。包括判断IE浏览器,Opera浏览器,苹果浏览器,谷歌浏览器,火狐浏览器等。

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, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
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, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}

上周接到个需求,需求是这样的:用户扫一扫二维码会产生一个链接,该链接会向后端发送个请求,返回一个 apk 的下载地址,用户点击下载按钮可以下载此 apk。然后就发生了问题,经过测试,发现用微信扫一扫打开的页面点击下载按钮下载不了 apk,后百度之,原来是微信内置浏览器屏蔽了下载链接,后面和需求方沟通,需求改为如果用户是用微信内置浏览器打开的,则提示用户换一个浏览器打开页面,否则下载不了 apk。那么该如何判断用户是否是用微信浏览器呢?

我们知道 js 可以通过 window.navigator.userAgent 来获取浏览器的相关信息,比如:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 Safari/537.36,那么我们也可以通过该方法来获取微信内置浏览器的相关信息:Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Mobile/11d201 MicroMessenger/5.3。根据关键字 MicroMessenger 来判断是否是微信内置的浏览器。判断函数如下:

function isWeiXin(){
var ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
return true;
}else{
return false;
}
}

browser.versions.weixin的更多相关文章

  1. 判断是否安装APP

    var time; $('#open').on('click',function(){ window.location="协议";//打开某手机上的某个app应用 time = s ...

  2. 内核终端判断,微信?QQ?ipad?IE?移动?Google?opera……

    $(document).ready(function(){ //判断访问终端 var browser={ versions:function(){ var u = navigator.userAgen ...

  3. js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结

    1.js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结 : http://www.haorooms.com/post/js_pc_iosandmobile 2.Js判断客户端是否为PC还是手 ...

  4. js判断浏览器类型以及语言

    1.检查是否是移动端(Mobile).ipad.iphone.微信.QQ等 <script type="text/javascript"> //判断访问终端 var b ...

  5. 手机UA识别

    整理手机UA识别如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  6. Graded Browser Support

    ( The YUI Target Environments Matrix is here) About the Browser Test Baseline and Operating Systems ...

  7. [转]Stop Sharing Session State between Multiple Tabs of Browser

    本文转自:http://jinaldesai.net/stop-sharing-session-state-between-multiple-tabs-of-browser/ Scenario: By ...

  8. 《如何使用Javascript判断浏览器终端设备》

    WEB开发中如何通过Javascript来判断终端为PC.IOS(iphone).Android呢? 可以通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端. va ...

  9. 二维码跳转不同的 app store

    说道二维码 之前是用来跳转app store  然后在就是出来的 扫码付款什么的 用的很平常,其实里面也很简单   自己刚开始接触的时候     同事说要做一个二维码下载 应用 => 我=懵逼 ...

随机推荐

  1. jquery ajax 跨域问题

    前言:关于跨域CORS 1.没有跨域时,ajax默认是带cookie的 2.跨域时,两种解决方案: 1)服务器端在filter中配置 详情:http://blog.csdn.net/wzl002/ar ...

  2. Java面试& HashMap实现原理分析

    1. HashMap的数据结构 数据结构中有数组和链表来实现对数据的存储,但这两者基本上是两个极端.  数组 数组存储区间是连续的,占用内存严重,故空间复杂的很大.但数组的二分查找时间复杂度小,为O( ...

  3. 使用Crash工具查看一个TCP listen sock内存布局实例

    利用crash工具,我们可以很方便的查看正在运行内核的一些全局变量的数据结构,如TCP的ehash.bhash哈希桶,全局变量的查看比较简单.Crash工具还允许我们查看调用堆栈内部的局部变量,下面示 ...

  4. Activity设置背景透明之开发坑

    Activity设置背景透明的常规方法 方法一.在Manifest.xml中,直接在需要设置的Activity中添加主题样式: Android:theme="@android:style/T ...

  5. vue2.0 keep-alive 最佳实战(转载)

    1.基本用法 vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗 <keep-alive> <component> <!-- ...

  6. Error: Unable to access jarfile D:\Apache\apache-jmeter-3.0\bin\ApacheJMete.jar

    双击jmeter.bat后,在cmd窗口显示Error: Unable to access jarfile D:\Apache\apache-jmeter-3.0\bin\ApacheJMete.ja ...

  7. elasticsearch6 学习之安装

    安装环境:centos6.5  64位      jdk1.8      elasticsearch6.1.1 一.启动 [root@localhost bin]# ./elasticsearch - ...

  8. Kafka高可用实现

    数据存储格式 Kafka的高可靠性的保障来源于其健壮的副本(replication)策略.一个Topic可以分成多个Partition,而一个Partition物理上由多个Segment组成. Seg ...

  9. Java的StringBuIlder扩容机制

    JDK 1.6中,扩容的源码是这样: void expandCapacity(int minimumCapacity) { int newCapacity = (value.length + 1) * ...

  10. Golang基础(二)

    1. 条件语句 if ... else if ... else... package main import "fmt" func main() { { fmt.Printf(&q ...