利用js判斷手機(jī)是否安裝某個(gè)app的多種方案
前言
大家在日常開(kāi)發(fā)的時(shí)候,經(jīng)常會(huì)遇到這樣的需求,通過(guò)檢測(cè)手機(jī),如果本地安裝了app那么直接打開(kāi),否則蘋(píng)果要跳轉(zhuǎn)到app-store,安卓則要跳到對(duì)應(yīng)的市場(chǎng),下面來(lái)給大家介紹幾種解決的方案。
解決方案 一
//html代碼中 的 a 標(biāo)簽,以微信為例,默認(rèn)的是調(diào)用weixin scheme,去打開(kāi)本機(jī)的微信,如果沒(méi)有則跳轉(zhuǎn)到相應(yīng)連接
<a href="weixin://" rel="external nofollow" class="btn-download">立即打開(kāi)</a>
// 為btn-download 綁定事件,如果在500ms內(nèi),沒(méi)有解析到協(xié)議,那么就會(huì)跳轉(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);
解決方案二
通過(guò)在頁(yè)面中生成一個(gè)隱藏的iframe,iframe的src指向 app 協(xié)議,例如 weixin scheme,并監(jiān)聽(tīng)onerror事件,意思是如果無(wú)法解析協(xié)議,就會(huì)觸發(fā)onerror事件,但是我嘗試了一下,未果。代碼如下,可參考一下。
// 頁(yè)面中有div#iframe-box 用來(lái)插入生成的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);
// 但這時(shí)的問(wèn)題是,iframe的src成功解析到了協(xié)議,則會(huì)直接跳轉(zhuǎn),但是解析不到的話,也不會(huì)觸發(fā)error事件,這個(gè)還要繼續(xù)研究
// 可以把上面的代碼,放到函數(shù)中,然后作為某個(gè)按鈕的響應(yīng)函數(shù)。
解決方案三
對(duì)于ios手機(jī),會(huì)有如下寫(xiě)法
<meta name="apple-itunes-app" content="app-id=414478124" />
將上面代碼放到head中,根據(jù)name也會(huì)知道意思,app-id是微信的app-id,用ios手機(jī)看會(huì)看到提示,andriod比可以,結(jié)果自行實(shí)驗(yàn)。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流。
- JSP中實(shí)現(xiàn)判斷客戶端手機(jī)類型并跳轉(zhuǎn)到app下載頁(yè)面
- 用于deeplink的js方法(判斷手機(jī)是否安裝app)
- js判斷移動(dòng)端是否安裝某款app的多種方法
- JS監(jiān)聽(tīng)微信、支付寶等移動(dòng)app及瀏覽器的返回、后退、上一頁(yè)按鈕的事件方法
- JS實(shí)現(xiàn)點(diǎn)擊網(wǎng)頁(yè)判斷是否安裝app并打開(kāi)否則跳轉(zhuǎn)app store
- js實(shí)現(xiàn)微信/QQ直接跳轉(zhuǎn)到支付寶APP打開(kāi)口令領(lǐng)紅包功能
- JS觸摸屏網(wǎng)頁(yè)版仿app彈窗型滾動(dòng)列表選擇器/日期選擇器
- JS拉起或下載app的實(shí)現(xiàn)代碼
- js判斷手機(jī)是否安裝并打開(kāi)app,未安裝則安裝app【兼容Android、ios,親測(cè)可用】
相關(guān)文章
vue 集成騰訊地圖實(shí)現(xiàn)api(附DEMO)
之前項(xiàng)目使用騰訊地圖,不利于開(kāi)發(fā)者查找,這篇文章主要介紹了vue 集成騰訊地圖實(shí)現(xiàn)api,具有一定的參考價(jià)值,感興趣的可以了解下2021-07-07
JS pushlet XMLAdapter適配器用法案例解析
這篇文章主要介紹了JS pushlet XMLAdapter適配器用法案例解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
檢查JavaScript對(duì)象屬性是否存在的方法小結(jié)
在前端開(kāi)發(fā)面試,面試官提出了一個(gè)經(jīng)典的JavaScript問(wèn)題:“在JavaScript中,如何檢查對(duì)象是否包含某個(gè)屬性?請(qǐng)你詳細(xì)介紹幾種不同的方法,并解釋它們的區(qū)別,”這個(gè)問(wèn)題考驗(yàn)?zāi)銓?duì)JavaScript的基礎(chǔ)掌握情況,讓我們進(jìn)入這個(gè)面試場(chǎng)景,需要的朋友可以參考下2024-09-09
基于BootStrap multiselect.js實(shí)現(xiàn)的下拉框聯(lián)動(dòng)效果
當(dāng)option特別多時(shí),一般的下拉框選擇起來(lái)就有點(diǎn)力不從心了,所以使用multiselect是個(gè)很好的選擇。在網(wǎng)上找了半天找到了解決方案,具體實(shí)現(xiàn)代碼大家參考下本文吧2017-07-07
js動(dòng)態(tài)修改input輸入框的type屬性(實(shí)現(xiàn)方法解析)
本文是對(duì)js動(dòng)態(tài)修改input輸入框的type屬性的實(shí)現(xiàn)方法。進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11

