html判断是否在微信里打开,JavaScript判断浏览器内核,微信打开自动提示在浏览器打开...

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

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

请点击屏幕右上角 [ ··· ] 

在  浏览器打开

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

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

/*

* 智能手机浏览器版本信息:

*/

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";

}

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

07a108ac2e9d0bd8e222bb751fdefdb6.png

我把代码放在了我的 GitHub 上,有需要的可以:点击访问

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值