H5跳轉app代碼

本文轉載自查看原文 2019-02-14 15:31 1432

不羅嗦直接上代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <title>Document</title>
  <script src="./jquery-3.2.1/jquery-3.2.1.min.js"></script>
</head>
<body>
  <div class="box">
      <img id="btn" src="./images/750-1280.jpg"></img>
  </div>
  <style>
    html,body,.box{
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    img{
      width: 100%;
      height: 100%;
    }
  </style>
  <script>
    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) {
      stopDefault()
      let {isAndroid,isIOS,isIOS9} = detectVersion()
      if(isAndroid || isIOS){
        var timeout, t = 4000, hasApp = true;  
        var openScript = setTimeout(function () {  
          if (!hasApp) {
            callback && callback()
          }
          document.body.removeChild(ifr);  
        }, 5000)  
        
        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;
          }
        }, t);
      }
      if(isIOS9){
        // window.location.href = url;
        setTimeout(function() {   
            callback && callback()
        }, 1000);
        setTimeout(function() {
            location.reload();
        }, 2000);
      }  
    }
    
    //跳轉h5網站
    function goConfirmAddr(){
      window.location.href = 'https://m.tb.cn/h.3Fe5mRA?sm=6f43f6'
      stopDefault()
    }
    function stopDefault(e) {
      if (e && e.preventDefault) {
        e.preventDefault();//防止瀏覽器默認行為(W3C) 
      } else {
        window.event.returnValue = false;//IE中阻止瀏覽器行為 
      }
      return false;
    }
    //配置對應圖片大小
    function getWidthAndHeight(){
      console.log(window.innerHeight + "，" +window.innerWidth+','+window.screen.height);
      var num = window.innerWidth/window.innerHeight;
      let {isAndroid,isIOS,isIOS9} = detectVersion()
      if(isAndroid) {
        $('#btn').attr("src","./images/1080-1601.jpg");
      }else{
        switch(window.screen.height){
          case 736:
          $('#btn').attr("src","./images/720-1062.jpg");
          break;
          case 667:
          $('#btn').attr("src","./images/1080-1844.jpg");
          break;
          case 568:
          $('#btn').attr("src","./images/750-1280.jpg");
          break;
          case 812:
          $('#btn').attr("src","./images/1080-1844.jpg");
          break;
          default:
          $('#btn').attr("src","./images/1242-1786.jpg");
        }
      }
    }
    window.onload = function(){
      getWidthAndHeight()
      //3秒內點擊多次只執行一次
      var checkClick = false;
      $('#btn').click(function() {
        if(checkClick === true) {
          return false
        }
        openApp("taobao://m.tb.cn/h.3Fe5mRA?sm=6f43f6",goConfirmAddr)
        checkClick = true;
        setTimeout(function(){
          checkClick = false
        },3000)
      });
    }
  </script>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 APP 間跳轉 & H5 跳到APP h5跳轉到app的實現 h5 喚起app或跳轉appStore H5 APP（ios）跳轉到app store H5混合開發app常用代碼 h5網頁跳轉到app，若未安裝app，則跳轉app下載頁面 h5網頁跳轉到app，若未安裝app，則跳轉app下載頁面 h5 調起app 如果沒安裝就跳轉下載 h5與app交互 H5喚醒APP