h5網頁打開手機APP

  首先說下需求，一個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)

        // }
      }
    }