js判断移动端是否安装某软软件，安装直接打开相应的链接，否则跳转到下载商店方法

时间：2022-04-15 23:54:06
  <!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">

 /**

 一、https://blog.html5funny.com/2015/06/19/open-app-from-mobile-web-browser-or-webview/

 二、http://web.jobbole.com/86706/  浏览器中唤起 native app，否则跳转到应用商城下载

 三、https://developer.apple.com/library/content/documentation/General/Conceptual/AppSearch/UniversalLinks.html  apple官网对 universal links 的文档

 四、http://strivingboy.github.io/blog/2015/09/27/ios9/ iOS9 Universal Links （通用链接）

 五、http://www.cocoachina.com/ios/20150902/13321.html iOS 9学习系列：打通 iOS 9 的通用链接（Universal Links）

 六、http://www.jianshu.com/p/16374288c976 Universal Links通用链接应用跳转总结以及坑

 七、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.二级域名的测试是否有兼容问题

八、市面上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>

　　

相关文章