判断客户端
每个客户端都会有自己的 UA （userAgent）标识，可以用 JavaScript 获取客户端标识。
用正则来判断手机是 iOS（苹果）还是 Android（安卓）客户端。代码如下：
<script type="text/javascript">
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);
</script>
浏览器检查
可以检查是否是移动端（Mobile）、iPad、iPhone、微信、QQ等。
通过判断是否是微信，部分不能用微信打开的页面，可以设置一个引导提示，让用户在浏览器中打开。
方法一：
<script type="text/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.*/), //是否为移动终端
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()
}
</script>
使用方法：
//判断是否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);
方法二：
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";
};
判断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;
//简化
if(isAndroid){
window.location.href=urls.android;
}else if(isiOS){
window.location.href=urls.ios;
}else{
window.location.href=urls.other;
}
}
downApp();
可以直接把这个函数放在一个按钮或者链接上，点击触发这个事件。就能实现js点击跳转到适合手机的设备了。
例如：
<a href="javascript:void(0)" onclick="downApp()">点击下载应用</a>
唤起本地APP
在日常生活中，应该不难遇到打开页面自动跳转到APP的提示，有以下几种实现方案：
因为 iOS9 和之前的 iOS 系统有区别，所以这里我们也要区别对待。
iOS7/iOS8
iOS 中默认通过 Safari 打开 URL scheme ，方法一般有如下两种：
直跳方式：
点击链接、修改 window.location 等。
<a href="schemeUrl">唤醒APP</a>
或者：
window.location.href = schemeUrl;
iframe 方式：
直跳方式中，如果APP唤醒失败或者未安装，很多时候都会跳到错误页，很影响用户体验，我们可以做一个判断，若APP跳转失败则转到一个友好页面（如下载页面）。
该方法不会引起页面可见的变化（例如页面内容变成一个新页面），不会导致浏览器历史记录的变化，大致实现如下：
在 body 上添加 iframe，设置 src 属性为跳转的 URL scheme 。
<a href="APP下载地址">下载或打开APP</a>
<script>
$('a').click(function() {
var ifr = document.createElement('iframe');
ifr.src = '自定义 URL scheme';
ifr.style.display = 'none';
document.body.appendChild(ifr);
setTimeout(function(){
document.body.removeChild(ifr);
}, 3000);
});
</script>
过程是这样：点击 a 标签时，首先会尝试打开 URL scheme ，如果成功，就唤起APP；如果失败，则跳转到 href 属性，即下载页。
Android
// 延后50毫秒
setTimeout(function() {
location.href = ‘自定义 URL’
}, 50)
如果设置比较小的运行间隔（<30ms），在浏览器或者webview中，应用切换到后台，setInterval会被很明显的延迟执行，比如设置一个运行间隔20ms，总计运行100次的定时器，如果页面一直处于前台，则100次跑完，总耗时与 100×20=2000ms不会有太大差异，但页面在后台运行时，此时间会明显超过2000ms。可以利用这一点来实现是否成功打开APP检测及回调。
function openApp(openUrl, appUrl, action, callback) { //检查app是否打开
function checkOpen(cb) {
var _clickTime = +(new Date());
function check(elsTime) {
if (elsTime > 3000 || document.hidden || document.webkitHidden) {
cb(1);
} else {
cb(0);
}
} //启动间隔20ms运行的定时器，并检测累计消耗时间是否超过3000ms，超过则结束
var _count = 0, intHandle;
intHandle = setInterval(function () {
_count++;
var elsTime = +(new Date()) - _clickTime;
if (_count >= 100 || elsTime > 3000) {
clearInterval(intHandle);
check(elsTime);
}
}, 20);
}
//在iframe 中打开APP
var ifr = document.createElement('iframe');
ifr.src = openUrl;
ifr.style.display = 'none';
if (callback) {
checkOpen(function (opened) {
callback && callback(opened);
});
}
document.body.appendChild(ifr);
setTimeout(function () {
document.body.removeChild(ifr);
}, 2000);
}
另外，可以通过 document.hidden 或 document.[webkit|moz|ms]Hidden 来判断页面是否被置入后台（即应用被唤起），或 visibilitychange 事件，但对于Android 4.4版本一下则不支持。
iOS9
在 iOS 9 上，iframe 方案不可用。
按不能使用之前Android的代码，因为在打开自定义 URL scheme 时，会弹出对话框，询问是否用 xx 应用来打开。往往用户还没来得及点击打开，定时器又触发了，导致跳到 App Store。
可以在尝试打开URL scheme 后，再加一个页面跳转，这样对话框会被覆盖，再刷新页面，就能无需确认唤起APP：
$('a').click(function() {
location.href = '自定义 URL scheme';
location.href = '下载页';
location.reload();
}
这里，下载页延时 2 秒跳转到 App Store。
APP已安装这是没问题的，但如果APP未安装，跳 App Store 的请求会失败。
这时可以使用两个定时器：
$('a').click(function() {
location.href = '自定义 URL scheme';
setTimeout(function() {
location.href = '下载页';
}, 250);
setTimeout(function() {
location.reload();
}, 1000);
}
不过在iOS9中其实是支持universal link的，就是一个http域名形式，在微信中都可以唤起APP。如果未安装的话，可以直接引导用户去APP store下载。
计算时差的方案打开APP
var checkOpen = function (cb){
var _clickTime = +(new Date());
function check(elsTime) {
if ( elsTime > 3000 || document.hidden || document.webkitHidden) {
cb(1);
} else {
cb(0);
}
}
//启动间隔20ms运行的定时器，并检测累计消耗时间是否超过3000ms，超过则结束
var _count = 0, intHandle;
intHandle = setInterval(function(){
_count++;
var elsTime = +(new Date()) - _clickTime;
if (_count>=100 || elsTime > 3000 ) {
clearInterval(intHandle);
check(elsTime);
}
}, 20);
}
checkOpen(function(opened){
// APP没有打开成功 并且开启自动跳转到下载页
if(opened === 0 && option.autoRedirectToDownloadUrl){
location.href = downloadUrl;
}
});
另一种方法，iOS会有弹窗
$("a[href^='schema://']").on('click',function(e){
e.preventDefault();
if(isWeixinBrowser() || isQQBrowser()){
$('.layer').show(); //友好的提示页面
}else{
if(isAndroid){
//android
//此操作会调起app并阻止接下来的js执行
$('body').append("<iframe src='schema://openapp' style='display:none' target='' ></iframe>");
//没有安装应用会执行下面的语句
setTimeout(function(){window.location = 'http://www.yourdlurl.com/download.html'},600);
}else{
//ios
window.location = 'schema://openapp';
setTimeout(function(){window.location = 'itms-apps://itunes.apple.com/app/idXXXXXXX'},25);
}
}
})
function isWeixinBrowser() {
return (/micromessenger/.test(ua)) ? true : false;
}
function isQQBrowser() {
return (ua.match(/QQ/i) == "qq") ? true : false;
}
原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/231327.html