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

最後更新：2016-09-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

應用情境

　　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>

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

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

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support