H5跳转app代码

不罗嗦直接上代码
<!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>
巴特西

H5跳转app代码

最新文章

热门文章
