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

时间: 2020-02-19阅读: 295标签: 浏览器

微信会屏蔽 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.wx) {
    con.style.cssText = "display:block";
    // window.location.href= 'http://c.pc.qq.com/middle.html?pfurl=https://www.rencaiyoujia.com/appdown/index.html';
  } else if (browser.versions.android) {
    // 此处写Andoird 的下载地址
    window.location = "https://www.w3h5.com/w3h5.apk";
  } else if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {
    alert("iOS暂不支持下载哦~");
    //TODO 此处写ios的下载地址
    window.location = "https://www.w3h5.com/w3h5.ipa";
  } else {
    window.location = "https://www.w3h5.com/w3h5.apk";
  }
</script>

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


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/8285

html5的pushstate以及监听浏览器返回事件

实际开发我们在A页面调用组件,在组件里面填好内容之后,发现想退出不想填了,因为组件与A页面此时在同一页面,点击返回时候 给人感觉是返回上上个页面,但之前A页面填写的东西 都没有了,这很影响体验。

主流浏览器对ES6的支持情况

现在使用的js语法,基本是ES5的规范 ,15年出的ES6的规范增加了很多其他语法,要看浏览器的支持情况,如果浏览器不支持那么就会报错,ES6 块级作用域 关键字let, 常量const,对象字面量的属性赋值简写,赋值解构,函数参数

用JavaScript让你的浏览器说话

最近在开发一个个人项目时,我冒出了一个尝试让浏览器说话的想法。不知道该怎么做,于是,我在网上寻找了一下答案,在MDN上,我找到了答案。让我们来看看如何通过JavaScript让浏览器说话。

javascript判断浏览器类型与版本

除了另无它法,肯定不使用navigator.userAgent来判定浏览器。因为在第一次浏览器大战初期,Netscape占绝对统计地位,大部分人们不愿意兼容其他浏览器,并通过检测其UA让他们的网站只允许Netscape访问

浏览器中实现JavaScript计时器的4种创新方式

由于 Web Worker 本质上是Web线程,因此你可以在其中无限循环而不阻塞主线程。这使你可以访问微秒级的时间分辨率。这对于在 Worker 中做出时间关键的决策是特别实用的,可以让主线程准确的知道什么时候合适

浏览器执行js原理

是不是大都数前端开发者都会有这样的疑惑,确实,我自己在开发的过程中每次碰到promise,setTimeout,requestAnimationFrame都会去想,在这个执行的过程中到底发生了什么?

js禁止浏览器保存用户密码

在HTML中,除了要用的密码框以外,额外添加一个密码框,设置为隐藏,注意:添加的用来干扰的密码框,必须在有用的密码框的上面,上面任何地方都行,就是不要在下面。

浏览器是多进程还是单进程?

浏览器是多进程的,浏览器每一个 tab 标签都代表一个独立的进程(也不一定,因为多个空白 tab 标签会合并成一个进程),浏览器内核(浏览器渲染进程)属于浏览器多进程中的一种。

浏览器storage你真的会用吗

html5标准localstorage和sessionStorage 为现代浏览器提供用户会话级别的数据存取。它们允许你访问一个Document 源(origin)的对象 Storage,也就是在遵守同源策略情况下存取数据。

JS 识别安卓还是ios苹果、识别是否微信内置浏览器、手机类型

识别手机平台是IOS还是安卓;识别是否微信内置浏览器;识别移动终端手机品牌

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广