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>