zoukankan      html  css  js  c++  java
  • 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)
    
            // }
          }
        }
  • 相关阅读:
    tcpreplay安装使用经验
    Linux 性能优化之 IO 子系统 系列 图
    深入理解Fsync----JBD内核调试 专业打杂程序员 @github yy哥
    LINUX 文件系统JBD ----深入理解Fsync
    通过查看mysql 配置参数、状态来优化你的mysql
    linux IO 内核参数调优 之 原理和参数介绍
    Mysql参数详解
    Mysql show Status参数详解
    MYSQL: Handler_read_%参数说明
    mysql的优化措施,从sql优化做起
  • 原文地址:https://www.cnblogs.com/cq1715584439/p/12956033.html
Copyright © 2011-2022 走看看