【JS】點擊頁面判斷是否安裝app並打開,否則跳轉下載的方法

本文轉載自查看原文 2016-09-06 17:52 33351 Web/ JS

應用場景

　　App產品在運營推廣上有一個需求，就是要求可以讓用戶在訪問我們的推廣網頁時，就可以判斷出這個用戶手機上是否安裝了我們的App，如果安裝了則可以直接在網頁上打開，否則就引導用戶前往下載。從而形成一個推廣上的閉環。

解決辦法

　　而對於點擊鏈接后，能否直接打開，可以通過下面的代碼來實現。前提條件：你得知道你的APP對應的打開協議，如貼吧APP，協議為：com.baidu.tieba:// ，微信的：weixin:// ，等等

 1 <!-- a標簽點擊打開的動作，在click事件中注冊 -->
 2 <a href="javascript:;" id="openApp">貼吧客戶端</a>
 3 <script type="text/javascript">
 4     document.getElementById('openApp').onclick = function(e){
 5         // 通過iframe的方式試圖打開APP，如果能正常打開，會直接切換到APP，並自動阻止js其他行為
 6         
 7         var ifr = document.createElement('iframe');
 8         ifr.src = 'com.baidu.tieba://';//打開app的協議，有app同事提供
 9         ifr.style.display = 'none';
10         document.body.appendChild(ifr);
11         window.setTimeout(function(){
12             document.body.removeChild(ifr);
13 　　　　　　　window.location.href = "https://itunes.apple.com/cn/app/id477927812";//打開app下載地址，有app同事提供
14         },2000)
15     };
16 </script>

此方法有些瀏覽器不兼容iframe，可以window.location的方法解決

1 <a href="javascript:;" id="openApp">貼吧客戶端</a>
2 <script type="text/javascript">
3     document.getElementById('openApp').onclick = function(e){
4         window.location.href = "com.baidu.tieba://";
5         window.setTimeout(function(){
6             window.location.href = "https://itunes.apple.com/cn/app/id477927812";//打開app下載地址，有app同事提供
7         },2000)
8     };
9 </script>

IOS上的Banner

　　參考網頁：https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html

　　應用場景：

　　1、用戶第一次訪問宣傳頁面

　　a、點擊Banner，進入到APP Store中對應的APP下載頁

　　b、APP下載頁中提示：安裝；用戶點擊安裝

　　c、安裝完成后，APP下載頁中提示：打開；用戶繼續點擊打開

　　d、用戶正常使用APP

　　2、用戶第二次訪問宣傳頁面

　　a、點擊Banner，進入到APP Store中對應的APP下載頁

　　b、APP下載頁中提示：打開；用戶直接點擊打開

　　c、用戶正常使用APP

　　3、用戶第三次、第四次、...、第N次訪問，操作步驟同2

　　在iOS上，要增加一個APP的大Banner，其實只需要在<head>標簽內增加一個<meta>標簽即可，格式如：

　　百度貼吧的

1 <meta name='apple-itunes-app' content='app-id=477927812'>

測試Demo

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>this's a demo</title>
 6     <meta name='apple-itunes-app' content='app-id=477927812'>
 7 </head>
 8 <body>
 9     <a href="javascript:;" id="openApp">貼吧客戶端</a>
10 </body>
11 </html>
12 <script type="text/javascript">
13     document.getElementById('openApp').onclick = function(e){
14         
15         if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i))
16            {
17             window.location.href = "com.baidu.tieba://";//ios app協議
18             window.setTimeout(function() {
19                 window.location.href = "https://itunes.apple.com/cn/app/id477927812";
20             }, 2000)
21            }
22         if(navigator.userAgent.match(/android/i))
23         {
24             window.location.href = "com.baidu.tieba://app";//android app協議
25             window.setTimeout(function() {
26                 window.location.href = "https://****.apk";//android 下載地址
27             }, 2000)    
28         }
29     };
30 </script>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 【JS】【20】點擊頁面判斷是否安裝app並打開，否則跳轉下載的方法 JS open App（未安裝就跳轉下載頁面）微信打開分享鏈接並且檢測是否有APP，若有APP則跳轉打開APP，沒有則跳轉下載界面 js判斷是否安裝app並其下載或打開 h5頁面喚起app(iOS和Android),沒有安裝則跳轉下載頁面 js判斷移動端是否安裝某軟軟件，安裝直接打開相應的鏈接，否則跳轉到下載商店方法 html5頁面js判斷是否安裝app，以及判斷是否在app內部打開html5頁面 h5 調起app 如果沒安裝就跳轉下載 uni-app判斷有沒有安裝這個app，如果有的話直接打開，沒有的話跳轉到下載頁面 web頁面打開本地app（判斷是否安裝）