JavaScript判断浏览器内核,微信打开自动提示在浏览器打开

微信会屏蔽 URL 自定义的 scheme ,导致无法跳转手机中的浏览器。网上有一些工具类网站可以实现直接跳转浏览器,之后有机会我会整理一下。我们今天只讨论通过 JavaScript 判断是否在微信浏览器中打开,如果是则弹出提示,在浏览器中打开。

我首先在 body 中写了一个提示信息:(默认隐藏)

<div id="container" style="display: none">
  <div style='position:relative;padding-top:100px;color:#333;font-size: 22px;text-align: center;'>
    <i style='position: absolute;top: 10px;right: 10px;font-size: 100px' class='iconfont icon-jiantou'></i>
    <p style="font-weight: 600;">请点击屏幕右上角 [ ··· ] </p>
    <p>在 <i style='font-size: 60px;color: #1487F0' class='iconfont icon-browser'></i> 浏览器打开</p></div>
</div>

图标我使用的阿里图标库,节省资源,提高打开速度。

通过 JavaScript 判断浏览器内核,如果是微信,显示信息,提示“在浏览器打开”,如果不是则自动跳转下载链接:

<script>
  /*
   * 智能手机浏览器版本信息:
   */
  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.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
        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应该程序,没有头部与底部
        wx: u.indexOf("MicroMessenger") > 0 //是否是微信
      };
    }(),
    language: (navigator.browserLanguage || navigator.language).toLowerCase()
  },con=document.getElementById("container");
  if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {
    alert("ios暂不支持下载哦~");
    //TODO 此处写ios的下载地址
    //window.location="https://www.baidu.com/data/baidu.ipa";
  } else if (browser.versions.android) {
    if (browser.versions.wx) {
      con.style.cssText="display:block";
      // window.location.href= 'http://c.pc.qq.com/middle.html?pfurl=https://www.baidu.com/appdown/index.html';
    } else{
      // 此处写Andoird 的下载地址
      window.location = "https://www.baidu.com/appdown/baidu.apk";
    }
  } else {
    window.location = "https://www.baidu.com/appdown/baidu.apk";
  }
</script>

这样如果是微信打开会自动提示在浏览器中打开,如下图所示:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏蚂蚁开源社区

适用于小团队的前端规范示例

适用于前端开发团队规范为参考规范,不全是硬性要求,统一团队编码规范和风格。让所有代码都是有规可循的,并且能够获得沉淀,减少重复劳动。

7320
来自专栏AI科技评论

如何利用并发性加速你的 python程序(上)

工程师 Jim Anderson 分享了他的经验,他写了一篇关于「通过并发性加快 python 程序的速度」的文章。Jim 有多年的编程经验,并且使用过各种编程...

9020
来自专栏全栈者

50道常见的js面试题

string, boolean, number, undefined, function, object

13410
来自专栏智能计算时代

「前端架构」Grab的前端学习指南

公司是东南亚(SEA)领先的运输平台,我们的使命是利用公司最新的技术和人才,推动SEA前进。截至2017年5月,我们每天处理230万次乘车,我们正在快速增长和招...

7020
来自专栏Rust语言学习交流

【Rust日报】 2019-10-29 async-std v0.99.11 发布

支持 2D 以及 3D 的流体模拟。提供多种类型的流体模拟,并且可以和 nphysics 引擎配合使用。了解更多

13630
来自专栏Bypass

由OSS AccessKey泄露引发的思考

对象存储服务(Object Storage Service,OSS)是一种海量、安全、低成本、高可靠的云存储服务,适合存放任意类型的文件。容量和处理能力弹性扩展...

21420
来自专栏码匠的流水账

聊聊nacos address的getCluster

nacos-1.1.3/address/src/main/java/com/alibaba/nacos/address/controller/ServerLis...

8020
来自专栏JAVAandPython君

如何让你写的爬虫速度像坐火箭一样快【并发请求】

首先,我们需要知道什么是并发,这里的并发指的是“并行发送请求”,意思就是一次性发出多个请求,从而达到节省时间的效果!那么并发和不并发的区别在哪呢?简单来说就是这...

7520
来自专栏Rust语言学习交流

【Rust日报】 2019-10-27 為什麼async函數很難寫?

變成 impl Trait in traits 要 GATs generic associated type

11840
来自专栏Java帮帮-微信公众号-技术文章全总结

了解 JavaScript 新特性:Optional Chaining

JavaScript 中的长属性访问链很容易出错,因为它们中的任何一个都可能评估为null或undefined(也称为“空”值)。要在每个步骤都中检查属性是否存...

6830

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励