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

前言：我們在日常中應該經常碰到這樣的場景，打開一個頁面，可跳轉到對應APP內打開，如果沒有安裝對應APP則會提示下載

正文：

前提條件：你得知道你的APP對應的打開協議，如貼吧APP，協議為：com.baidu.tieba:// ，微信的：weixin:// 

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

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

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

參考博客：

【JS】點擊頁面判斷是否安裝app並打開,否則跳轉下載的方法
http://www.mamicode.com/info-detail-1518140.html