JS简单判断是否在微信浏览器打开的方法示例


Posted in Javascript onJanuary 08, 2019

本文实例讲述了JS简单判断是否在微信浏览器打开的方法。分享给大家供大家参考,具体如下:

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

<script>
    var ua = navigator.userAgent.toLowerCase();
    var isWeixin = ua.indexOf('micromessenger') != -1;
    if (!isWeixin) {
      window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=888"
    }
</script>

只要不是在微信内部打开网页的,就会跳转提示页面,appid必写,可随意写,也可以写已获取的。

还是觉得跳转比较好,防止别人查看自己的代码。

以下是一段示例代码,注释中表明了通过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()
}
Javascript 相关文章推荐
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
选择器中含有空格在使用示例及注意事项
Jul 31 Javascript
原生javascript实现无间缝滚动示例
Jan 28 Javascript
css如何让浮动元素水平居中
Aug 07 Javascript
jQuery的remove()方法使用详解
Aug 11 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
javascript完美实现给定日期返回上月日期的方法
Jun 15 Javascript
Angular 作用域scope的具体使用
Dec 11 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
Angular脚手架开发的实现步骤
Apr 09 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 #jQuery
Angular6 发送手机验证码按钮倒计时效果实现方法
Jan 08 #Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 #Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 #Javascript
关于微信小程序登录的那些事
Jan 08 #Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
Jan 08 #Javascript
关于React动态加载路由处理的相关问题
Jan 07 #Javascript
You might like
超神学院:鹤熙已踏入神圣领域,实力不比凯莎弱
2020/03/02 国漫
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
2017/02/23 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
webpack配置sass模块的加载的方法
2017/07/30 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
js中的 || 与 &amp;&amp; 运算符详解
2018/05/24 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
Python图片的横坐标汉字实例
2019/12/04 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
班主任工作年限证明
2014/01/12 职场文书
开业庆典答谢词
2014/01/18 职场文书
销售冠军获奖感言
2014/02/03 职场文书
《再别康桥》教学反思
2014/02/12 职场文书
电子商务专业学生职业生涯规划
2014/03/07 职场文书
社团活动总结
2014/04/28 职场文书