H5页面判断客户端是iOS或是Android并跳转对应链接唤起APP
一、判断客户端
每个客户端都会有自己的 UA (userAgent)标识,可以用 JavaScript 获取客户端标识。
用正则来判断手机是 iOS(苹果)还是 Android(安卓)客户端。代码如下:
// 方法一
var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //Android var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //iOS alert('是否是Android:'+isAndroid); alert('是否是iOS:'+isiOS);
// 方法二
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
//alert(navigator.userAgent);
window.location.href ="iPhone.html";
} else if (/(Android)/i.test(navigator.userAgent)) {
//alert(navigator.userAgent);
window.location.href ="Android.html";
} else {
window.location.href ="pc.html";
};
二、浏览器检查
可以检查是否是移动端(Mobile)、iPad、iPhone、微信、QQ等。
通过判断是否是微信,部分不能用微信打开的页面,可以设置一个引导提示,让用户在浏览器中打开。
//判断终端
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('Adr') > -1, //Android终端
iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部
weixin: u.indexOf('MicroMessenger') > -1, //是否微信 (2015-01-22新增)
qq: u.match(/\sQQ/i) == " qq" //是否QQ
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
// 使用方法:
//判断是否IE内核
if (browser.versions.trident) {
alert("is IE");
}
//判断是否webKit内核
if (browser.versions.webKit) {
alert("is webKit");
}
//判断是否移动端
if (browser.versions.mobile || browser.versions.android || browser.versions.ios) {
alert("移动端");
}
// 检测浏览器语言:
currentLang = navigator.language; //判断除IE外其他浏览器使用语言
if(!currentLang){//判断IE浏览器使用语言
currentLang = navigator.browserLanguage;
}
alert(currentLang);
三、判断iOS/Android跳转相对链接
在H5等移动端页面上,经常会用到一个引导页面,点击按钮跳转下载链接。通常页面会自动判断手机,iOS跳转AppStore,Android直接跳转下载链接或者对应的应用商店页面。
通过上面的讲解,大家会发现,该功能其实也不难实现,代码如下(以微信为例):
function downApp(){
var u = navigator.userAgent,
isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1,
isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
urls = {
'android':'http://dldir1.qq.com/weixin/android/weixin704android1420.apk',
'ios':'https://itunes.apple.com/cn/app/wei/id414478124',
'other':'http://weixin.qq.com/d'
};
//三元运算
window.location.href = isAndroid? urls.android : isiOS? urls.ios : urls.other;
}
downApp();
// <a href="javascript:void(0)" onclick="downApp()">点击下载</a>
声明:本文由w3h5原创,转载请注明出处:《H5页面判断客户端是iOS或者Android并跳转对应链接唤起APP》 https://www.w3h5.com/post/334.html