最近做很多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. 为什么使彩色图变灰RGB的权重会固定(R:0.299 G:0.587 B:0.114)?

    人眼对绿色的敏感度最高,对红色的敏感度次之,对蓝色的敏感度最低,因此使用不同的权重将得到比较合理的灰度图像.根据实验和理论推导得出以下数值 R: 0.299. G:  0.587. B: 0.114.

  2. EGener2四则运算出题器

    项目源码: https://git.coding.net/beijl695/EGener2.git (代码纯属原创,设计细节不同,请思量) 项目发布后,由于期间各种事情,耽搁至最后一天交付.这次的项目 ...

  3. jquery 取消全选和全选功能 不全选

    代码如下 function ckSelectAll() { if ($('#ckSelectAll').is(':checked') == true) { $("INPUT[name='ch ...

  4. [2017BUAA软工]个人项目心得体会:数独

    心得体会 回顾此次个人项目,感受比较复杂,最明显的一点是--累!代码编写.单元测试.代码覆盖.性能优化,环环相扣,有种从作业发布开始就一直在赶DDL的感觉,但是很充实,也学习到和体验了很多东西.最令人 ...

  5. PAT 1024 科学计数法

    https://pintia.cn/problem-sets/994805260223102976/problems/994805297229447168 科学计数法是科学家用来表示很大或很小的数字的 ...

  6. node入门学习(一)

    一.安装node.js 方式很多npm,git等,新手建议从官网上直接去下载node的安装包.一键安装. 二.创建一个web服务器. const http = require('http'); htt ...

  7. linux ls文件颜色和底色设置

    转帖 :linux ls文件颜色和底色设置 白色:表示普通文件蓝色:表示目录绿色:表示可执行文件红色:表示压缩文件浅蓝色:链接文件红色闪烁:表示链接的文件有问题黄色:表示设备文件灰色:表示其他文件 这 ...

  8. 微信小程序组件 日历

    js文件 'use strict'; let choose_year = null,   choose_month = null; const conf = {   data: {     hasEm ...

  9. autoboxing and unboxing

    Why does 128==128 return false but 127==127 return true public static void autoboxingUnboxing(){ Int ...

  10. 第215天:Angular---指令

    指令(Directive) AngularJS 有一套完整的.可扩展的.用来帮助 Web 应用开发的指令集 在 DOM 编译期间,和 HTML 关联着的指令会被检测到,并且被执行 在 AngularJ ...