利用js判斷手機是否安裝某個app的多種方案
前言
大家在日常開發(fā)的時候,經(jīng)常會遇到這樣的需求,通過檢測手機,如果本地安裝了app那么直接打開,否則蘋果要跳轉(zhuǎn)到app-store,安卓則要跳到對應的市場,下面來給大家介紹幾種解決的方案。
解決方案 一
//html代碼中 的 a 標簽,以微信為例,默認的是調(diào)用weixin scheme,去打開本機的微信,如果沒有則跳轉(zhuǎn)到相應連接
<a href="weixin://" rel="external nofollow" class="btn-download">立即打開</a>
// 為btn-download 綁定事件,如果在500ms內(nèi),沒有解析到協(xié)議,那么就會跳轉(zhuǎn)到下載鏈接
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é)議,則會直接跳轉(zhuǎn),但是解析不到的話,也不會觸發(fā)error事件,這個還要繼續(xù)研究
// 可以把上面的代碼,放到函數(shù)中,然后作為某個按鈕的響應函數(shù)。
解決方案三
對于ios手機,會有如下寫法
<meta name="apple-itunes-app" content="app-id=414478124" />
將上面代碼放到head中,根據(jù)name也會知道意思,app-id是微信的app-id,用ios手機看會看到提示,andriod比可以,結(jié)果自行實驗。
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。
- JSP中實現(xiàn)判斷客戶端手機類型并跳轉(zhuǎn)到app下載頁面
- 用于deeplink的js方法(判斷手機是否安裝app)
- js判斷移動端是否安裝某款app的多種方法
- JS監(jiān)聽微信、支付寶等移動app及瀏覽器的返回、后退、上一頁按鈕的事件方法
- JS實現(xiàn)點擊網(wǎng)頁判斷是否安裝app并打開否則跳轉(zhuǎn)app store
- js實現(xiàn)微信/QQ直接跳轉(zhuǎn)到支付寶APP打開口令領(lǐng)紅包功能
- JS觸摸屏網(wǎng)頁版仿app彈窗型滾動列表選擇器/日期選擇器
- JS拉起或下載app的實現(xiàn)代碼
- js判斷手機是否安裝并打開app,未安裝則安裝app【兼容Android、ios,親測可用】
相關(guān)文章
基于layui的table插件進行復選框聯(lián)動功能的實現(xiàn)方法
今天小編就為大家分享一篇基于layui的table插件進行復選框聯(lián)動功能的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
layer彈出的iframe層在執(zhí)行完畢后關(guān)閉當前彈出層的方法
今天小編就為大家分享一篇layer彈出的iframe層在執(zhí)行完畢后關(guān)閉當前彈出層的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
JavaScript實現(xiàn)焦點進入文本框內(nèi)關(guān)閉輸入法的核心代碼
這篇文章給大家分享js實現(xiàn)焦點進入文本框內(nèi)關(guān)閉輸入法,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-09-09
js操作數(shù)據(jù)庫實現(xiàn)注冊和登陸的簡單實例
下面小編就為大家?guī)硪黄猨s操作數(shù)據(jù)庫實現(xiàn)注冊和登陸的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
javascript 產(chǎn)生隨機數(shù)的幾種方法總結(jié)
這篇文章主要介紹了javascript 產(chǎn)生隨機數(shù)的幾種方法總結(jié)的相關(guān)資料,希望通過本文大家能夠掌握如何實現(xiàn)這樣的方法,需要的朋友可以參考下2017-09-09

