js判斷移動端是否安裝某軟軟件，安裝直接打開相應的連接，不然跳轉到下載商店方法

時間 2019-11-06
標籤判斷移動是否安裝軟軟直接打開相應連接不然轉到下載商店方法欄目 JavaScript 简体版
原文原文鏈接
  <!DOCTYPE html>
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <!--  提示是否安裝，僅ios支持--> 
<meta data-react-helmet="true" name="apple-itunes-app" content="app-id=432274380, app-argument=zhihu://questions/20053940" data-reactid="10"/>
  <title>this‘s a demo</title>
  </head>
  <body>
      <a href="javascript:;" id="openApp">知乎客戶端</a>
      <input type="text" name="ee" autocomplete="on">
      <div style="float: width:100%;height: 34px;">
        <div style="float: left;width: 140px;height: 34px; background: blue"></div>
         <div style="float: right;width: 80px;height: 34px;background: red"></div>
        <div style="display: block;overflow: hidden;background: green;height: 34px;"></div>
       
      </div>

 </body>
 </html>
 <script type="text/javascript">
 /**
 1、https://blog.html5funny.com/2015/06/19/open-app-from-mobile-web-browser-or-webview/
 2、http://web.jobbole.com/86706/  瀏覽器中喚起 native app，不然跳轉到應用商城下載
 3、https://developer.apple.com/library/content/documentation/General/Conceptual/AppSearch/UniversalLinks.html  apple官網對 universal links 的文檔
 4、http://strivingboy.github.io/blog/2015/09/27/ios9/ iOS9 Universal Links （通用連接）
 5、http://www.cocoachina.com/ios/20150902/13321.html iOS 9學習系列：打通 iOS 9 的通用連接（Universal Links）
 6、http://www.jianshu.com/p/16374288c976 Universal Links通用連接應用跳轉總結以及坑
 7、universal link調研結果：
適合場景：
1.發短信和iMessage裏面包含連接，若是安裝應用跳轉應用，不然打開web頁面。
2.能夠自定義「下載x應用」和「打開x應。用」應用界面，這樣的好處點擊打開應用若是安裝直接打開，若是沒有安裝去下載界面。
3.某一個經過搜索進入的較大的二級域名的服務能夠部署打開應用，風險：可能會傷害咱們的seo排名

hack場景：
1.能夠某一天經過web頁面訪問且安裝的用戶所有啓動app，可是這樣會傷害用戶（用戶不知道爲何啓動了應用，可能所以卸載應用），若是咱們之後有特殊緣由須要使用能夠開發備用。
【hack方式是在一個二級域名裏面嘗試訪問另外一個二級域名觸發打開應用行爲，若是成功則打開，失敗則跳到二級頁面—>302—>回到本頁面】

注意事項：
1.當前域名不能和跳轉域名一致
2.不支持302跳轉
3.訪問域名後不支持本域名的universal link跳轉
4.二級域名能夠跳轉其餘域名
5.ios9以上可使用

universal link的坑
1.配置證書須要是https，但頁面載體能夠是http的頁面
2.須要制定路徑來區分跳轉  須要更近一測試多路徑
3.當前頁面若是已經加在好，則雖然是觸發url，可是不會觸發universal link
4.二級域名的測試是否有兼容問題

8、市面上h5喚起app（不論微信仍是普通瀏覽器） 有三種方式 
1 第三方 (魔窗,linkedME)
2 與騰訊深度合做的app 好比(keep) 在微信的白名單裏 經過 jssdk 的 launch3rdApp 喚起 
3 universal link 


 **/
 //   
 //判斷系統
 // var n = {
 //        Edge: /Edge/i,
 //        Wechat: /MicroMessenger/,
 //        Weibo: /Weibo/,
 //        QQ: /\sQQ\//,
 //        Mobile: /Mobile/,
 //        Android: /Android/,
 //        iOS: /iPhone|iPad|iPod/,
 //        isAppleDevice: /iPad|iPhone|iPod|Mac OS X/,
 //        Zhihu: /Zhihu|osee2unifiedRelease|Futureve/,
 //        isBot: /Baiduspider|Sogou\s\w+\sspider|Yisouspider|Googlebot|Bingbot|360Spider/
 //    };
 //     function n() {
 //        o.iOS = /iPad|iPhone/.test(i), o.ANDROID = /Android/.test(i), o.WECHAT = /MicroMessenger/.test(i), o.WEIBO = /Weibo/.test(i), o.UC = /UCBrowser/.test(i), o.MOBILE_CHROME = /Mobile/.test(i) && /CriOS/.test(i), "undefined" != typeof window && (o.WKWebView = o.iOS && Boolean(window.indexedDB))
 //    }
 //    var i = navigator.userAgent.indexOf("Windows Phone") >= 0,
 //            a = navigator.userAgent.indexOf("Android") > 0 && !i,
 //            u = /iP(ad|hone|od)/.test(navigator.userAgent) && !i,
 //            c = u && /OS 4_\d(_\d)?/.test(navigator.userAgent),
 //            s = u && /OS [6-7]_\d/.test(navigator.userAgent),
 //            l = navigator.userAgent.indexOf("BB10") > 0;


 var timeout;

 //安卓和ios以及微信和qq的打開app協議和跳轉到下載app市場的協議可能不一樣
     document.getElementById('openApp').onclick = function(e){
      var locationHref = window.location;
         
        if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)){
// 咱們還須要知道的一點是，微信裏屏蔽了schema協議。除非你是微信的合做夥伴之類的，他們專門給你配置進白名單，不然咱們就沒辦法經過這個協議在微信中直接喚起app。

// 所以咱們會判斷頁面場景是否在微信中，若是在微信中，則會提示用戶在瀏覽器中打開。
// 如何判斷本地是否安裝了app
                var ifr = document.createElement("iframe");
                ifr.src = "zhihu://"; /***打開app的協議，有ios同事提供 itms-apps://itunes.apple.com/app/apple-store/id432274380***/
                ifr.style.display = "none"; 
                document.body.appendChild(ifr);
                timeout = setTimeout(function(){
                  document.body.removeChild(ifr);
                   window.location.href = "https://oia.zhihu.com/articles/27494849"; /***下載app的地址***/
                },500)
        }else if(navigator.userAgent.match(/android/i)){
              //在安卓下有彈層提示是否進去下載應用商店，而且若是已經安裝進去app後返回 瀏覽器進去瀏覽器進入下載頁面而且刷新頁面時又進如app，知乎appye
              var ifr = document.createElement('iframe');
              ifr.src = 'zhihu://articles/27494849'; // shoule configure at AndroidManifest.xml
              ifr.style.display = 'none';
              document.body.appendChild(ifr);
              
                // var t ="zhihu://articles/27494849";
                // t += "backupurl=" +  encodeURIComponent("mstore://details?package_name=com.zhihu.android&source_apkname=com.zhihu.android&source_info=zhihu")
               timeout = setTimeout(function() {
                  document.body.removeChild(ifr);
                  window.location = "https://oia.zhihu.com/articles/27494849";//android 下載地址 安卓的下載地址和ios不一樣,安卓的下載地址最好不要跳轉到另一頁，最好在當前頁面，否則安卓下不論是否安裝該app老是先跳轉到該下載頁面而且跳轉app後再回來的時候瀏覽器停留在下載頁面，由於有時候網絡慢或者打開app的時間過長就會致使跳轉到了下載頁面，即便也打開了app，可是在回到瀏覽器就跳轉到了下載頁面，因此安卓下最好下載地址不要從新定義一個頁面
                  //安卓或者直接下載app  e.Wechat || e.Weibo ? s(t) : e.QQ || (window.location = 'https://api.zhihu.com/client/download/apk/latest')
               }, 800);
               if (document.addEventListener) {
                    document.addEventListener("webkitvisibilitychange", clean);
                    document.addEventListener("visibilitychange", clean);
                    document.addEventListener("pagehide",  clean);
                } else if (document.attachEvent) {
                    //document.attachEvent("onclick", myFunction);
                }
         }else{
             window.location.href = "https://oia.zhihu.com/articles/27494849";
         }
     }
     function clean() {
        clearTimeout(timeout);
        window.location.href = locationHref;
      }
 </script>