判断客户端
每个客户端都会有自己的 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; }
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/150329.html