首页 web前端 js教程 JS判断当前页面是否在微信浏览器打开的方法_javascript技巧

JS判断当前页面是否在微信浏览器打开的方法_javascript技巧

May 16, 2016 pm 03:27 PM
js 判断 微信 浏览器

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

最近做很多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()
}

登录后复制

希望本文所述对大家JavaScript程序设计有所帮助。

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何通过CSS自定义resize符号并使其与背景色统一? 如何通过CSS自定义resize符号并使其与背景色统一? Apr 05, 2025 pm 02:30 PM

CSS自定义resize符号的方法与背景色统一在日常开发中,我们经常会遇到需要自定义用户界面细节的情况,比如调...

如何在网页上正确显示本地安装的'荆南麦圆体”? 如何在网页上正确显示本地安装的'荆南麦圆体”? Apr 05, 2025 pm 10:33 PM

在网页中使用本地安装的字体文件最近,我从网上下载了一种免费字体,并成功将其安装到了我的系统中。现在...

负边距在某些情况下为何未生效?如何解决这个问题? 负边距在某些情况下为何未生效?如何解决这个问题? Apr 05, 2025 pm 10:18 PM

负边距为何在某些情况下未生效?在编程过程中,CSS中的负边距(negative...

Flex布局下文字超出省略却撑开容器?如何解决? Flex布局下文字超出省略却撑开容器?如何解决? Apr 05, 2025 pm 11:00 PM

Flex布局下文字超出省略导致容器撑开的问题及解决方法在使用Flex...

H5和小程序与APP的区别 H5和小程序与APP的区别 Apr 06, 2025 am 10:42 AM

H5、小程序和APP的主要区别在于:技术架构:H5基于网页技术,小程序和APP为独立应用程序。体验和功能:H5轻便易用,功能受限;小程序轻量级,交互性好;APP功能强大,体验流畅。兼容性:H5跨平台兼容,小程序和APP受平台限制。开发成本:H5开发成本低,小程序中等,APP最高。适用场景:H5适合信息展示,小程序适合轻量化应用,APP适合复杂功能应用。

如何使用 CSS 和 Flexbox 实现图片和文本在不同屏幕尺寸下的响应式布局? 如何使用 CSS 和 Flexbox 实现图片和文本在不同屏幕尺寸下的响应式布局? Apr 05, 2025 pm 06:06 PM

使用CSS实现响应式布局当我们希望在网页设计中实现不同屏幕尺寸下的布局变化时,CSS...

为什么Edge浏览器中的特定div元素无法显示?如何解决这个问题? 为什么Edge浏览器中的特定div元素无法显示?如何解决这个问题? Apr 05, 2025 pm 08:21 PM

如何解决用户代理样式表导致的显示问题?在使用Edge浏览器时,项目中的一个div元素无法显示。经过查看,发�...

如何通过JavaScript或CSS控制浏览器打印设置中的页首和页尾? 如何通过JavaScript或CSS控制浏览器打印设置中的页首和页尾? Apr 05, 2025 pm 10:39 PM

如何使用JavaScript或CSS控制浏览器打印设置中的页首和页尾在浏览器的打印设置中,有一个选项可以控制是否显�...

See all articles