h5网页打开手机APP

Posted 2020-12-22 玉麟家园

  首先说下需求，一个h5页面点击按钮打开手机某个app，如果有则打开，无自动跳转到应用商店；

 

　然后要明白，js没法检测手机是否有某个app，所以也就没法判断是打开应用商店还是app的链接，

 

　然后一个大概思路就是通过一个iframe标签去尝试的打开，如果打不开再去打开应用商店  

button[0].onclick = function () {
      function detectVersion() {
        let isandroid, isios, isIOS9, version,
          u = navigator.userAgent,
          ua = u.toLowerCase();

        if (u.indexOf(‘Android‘) > -1 || u.indexOf(‘Linux‘) > -1) {   //android终端或者uc浏览器
          //Android系统
          isAndroid = true
        }

        if (ua.indexOf("like mac os x") > 0) {
          //ios
          var regStr_saf = /os [d._]*/gi;
          var verinfo = ua.match(regStr_saf);
          version = (verinfo + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, ".");
        }
        var version_str = version + "";
        if (version_str != "undefined" && version_str.length > 0) {
          version = parseInt(version)
          if (version >= 8) {
            // ios9以上
            isIOS9 = true
          }
          else {
            isIOS = true
          }
        }
        return { isAndroid, isIOS, isIOS9 }
      }

      // 判断手机上是否安装了app，如果安装直接打开url，如果没安装，执行callback
      function openApp(url, callback) {
        let { isAndroid, isIOS, isIOS9 } = detectVersion()
        if (isAndroid || isIOS) {
          var timeout, t = 1500, hasApp = true;
          var openScript = setTimeout(function () {
            if (!hasApp) {
              callback && callback()
            }
            document.body.removeChild(ifr);
          }, 2500)
          var t1 = Date.now();
          var ifr = document.createElement("iframe");
          ifr.setAttribute(‘src‘, url);
          ifr.setAttribute(‘style‘, ‘display:none‘);
          document.body.appendChild(ifr);
          timeout = setTimeout(function () {
            var t2 = Date.now();
            if (t2 - t1 < t + 100) {
              hasApp = false;
              mask[0].style.display = "none"
            }
          }, t);
        }

        if (isIOS9) {
          location.href = url;
          setTimeout(function () {
            callback && callback()
            mask[0].style.display = "none"
          }, 250);
          setTimeout(function () {
            location.reload();
          }, 1000);
        }
      }

      //跳h5
      function goConfirmAddr() {
        // if (isAndroid) {
        //   // var a = document.createElement("a");
        //   // a.setAttribute("href",‘tongzhuo://sunlands‘);
        //   // a.style.display = "none";
        //   // var ev = document.createEvent(‘htmlEvents‘);
        //   // ev.initEvent(‘click‘, false, true);
        //   // a.dispatchEvent(ev);
        // } else {
        //   window.location.href = 应用宝链接
        // }
        window.location.href = 应用宝链接
      }

      if (isAndroid) {
        // window.onload  为啥不支持
        openApp("app链接", goConfirmAddr)
      }
      if (isiOS) {
        openApp("app链接", goConfirmAddr)
        // window.onload = function () {
        //   alert(22222)

        // }
      }
    }