利用js判斷手機是否安裝某個app的多種方案
更新時間：2017年02月13日 09:46:22 作者：尋一顆心
這篇文章主要介紹了利用js檢測手機是否安裝某個app的多種方案，當判斷后如果安裝了直接打開，如果有沒有安裝將自動跳轉到下載的界面，有需要的朋友可以參考借鑒，下面來一起看看吧。
前言
大家在日常開發(fā)的時候，經常會遇到這樣的需求，通過檢測手機，如果本地安裝了app那么直接打開，否則蘋果要跳轉到app-store，安卓則要跳到對應的市場，下面來給大家介紹幾種解決的方案。
解決方案 一
//html代碼中 的 a 標簽，以微信為例，默認的是調用weixin scheme，去打開本機的微信，如果沒有則跳轉到相應連接
<a href="weixin://" rel="external nofollow" class="btn-download">立即打開</a>
// 為btn-download 綁定事件，如果在500ms內，沒有解析到協(xié)議，那么就會跳轉到下載鏈接
var appstore, ua = navigator.userAgent;
if(ua.match(/Android/i)){
appstore = 'market://search?q=com.singtel.travelbuddy.android';
}
if(ua.match(/iphone|ipod|ipad/)){
appstore = "https://itunes.apple.com/cn/app/wei-xin/id414478124?mt=8&ign-mpt=uo%3D4";
}
function applink(fail){
return function(){
var clickedAt = +new Date;
// During tests on 3g/3gs this timeout fires immediately if less than 500ms.
setTimeout(function(){
// To avoid failing on return to MobileSafari, ensure freshness!
if (+new Date - clickedAt < 2000){
window.location = fail;
}
}, 500);
};
}
$('.icon-download, .btn-download')[0].onclick = applink(appstore);
解決方案二
通過在頁面中生成一個隱藏的iframe，iframe的src指向 app 協(xié)議，例如 weixin scheme，并監(jiān)聽onerror事件，意思是如果無法解析協(xié)議，就會觸發(fā)onerror事件，但是我嘗試了一下，未果。代碼如下，可參考一下。
// 頁面中有div#iframe-box 用來插入生成的iframe，還是以微信為例
var ifm = document.createElement('iframe'), isInstalled;
ifm.style.display = 'none';
ifm.src = 'wixin://';
ifm.onload = function(e){
var e = e || window.event;
e.preventDefault();
}
ifm.onerror = function(){
//isInstalled = false;
alert(1);
}
document.getElementById('iframe-box').appendChild(ifm);
// 但這時的問題是，iframe的src成功解析到了協(xié)議，則會直接跳轉，但是解析不到的話，也不會觸發(fā)error事件，這個還要繼續(xù)研究
// 可以把上面的代碼，放到函數中，然后作為某個按鈕的響應函數。
解決方案三
對于ios手機，會有如下寫法
<meta name="apple-itunes-app" content="app-id=414478124" />
將上面代碼放到head中，根據name也會知道意思，app-id是微信的app-id，用ios手機看會看到提示，andriod比可以，結果自行實驗。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
相關文章
基于layui的table插件進行復選框聯(lián)動功能的實現方法
今天小編就為大家分享一篇基于layui的table插件進行復選框聯(lián)動功能的實現方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
在做項目的時候,前端需要在表格的底部做一個匯總的功能,在采用reduce對當前屬性所有值匯總時,發(fā)現匯總結果存在好長的小數位,本文給大家介紹了如何解決前端JS小數運算精度問題,需要的朋友可以參考下2024-02-02
layer彈出的iframe層在執(zhí)行完畢后關閉當前彈出層的方法
今天小編就為大家分享一篇layer彈出的iframe層在執(zhí)行完畢后關閉當前彈出層的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
JavaScript實現焦點進入文本框內關閉輸入法的核心代碼
這篇文章給大家分享js實現焦點進入文本框內關閉輸入法，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-09
newxtree.js代碼...2007-03-03
下面小編就為大家?guī)硪黄猨s操作數據庫實現注冊和登陸的簡單實例。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要為大家介紹了javascript函數進階，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>2021-12-12
這篇文章主要介紹了javascript 產生隨機數的幾種方法總結的相關資料,希望通過本文大家能夠掌握如何實現這樣的方法，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了詳解nuxt 微信公眾號支付遇到的問題與解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
這篇文章主要介紹了JS中的回調函數,結合實例形式簡單分析了javascript回調函數的感念、功能、使用方法及相關注意事項,需要的朋友可以參考下2018-03-03