美文网首页
前端js 判断打开app还是跳转下载页面

前端js 判断打开app还是跳转下载页面

作者: Yyyyyyyyyujie | 来源:发表于2020-07-02 15:28 被阅读0次

开始之前看了掘金的文章

浏览器中唤起native app || 跳转到应用商城下载(一)
浏览器中唤起native app || 跳转到应用商城下载(二) 之universal links

讲的很清楚 我直接说我怎么写的

// 获取路径参数
  var localUrl = window.location.href.toString();
  var arrObj = localUrl.split("?");
//我这里的参数是url 所以取url后面的值 
  var params = decodeURIComponent(arrObj[1]).substring(4);

判断逻辑

   var url = {
      open: '***://' + params, //这里写自己的app的URL Scheme
      down: 'http://www.***.com/' ,//下载页
   };
    var iframe = document.createElement('iframe');
    var body = document.body;
    iframe.style.cssText = 'display:none;width=0;height=0';
    var timer = null;
    var u = navigator.userAgent;
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端

    if(/MicroMessenger/gi.test(navigator.userAgent)){
        // 引导用户在浏览器中打开 微信中打开
        alert("请在浏览器打开")
      } else{

        if(isiOS){ //ios中直接跳转
            window.location.href = url.open;
        }else if(isAndroid){
           iframe.src = url.open;
           body.appendChild(iframe);
        }
        //app打开失败 跳转下载页面
        timer = setTimeout(function() {
          window.location.href = url.down;
        }, 2000);
      }

页面关闭隐藏的监听

   $(document).on('visibilitychange webkitvisibilitychange', function() {
        var tag = document.hidden || document.webkitHidden;
        if (tag) {
            clearTimeout(timer);
        }
    })

    $(window).on('pagehide', function() {
        clearTimeout(timer);
    })

相关文章

网友评论

      本文标题:前端js 判断打开app还是跳转下载页面

      本文链接:https://www.haomeiwen.com/subject/eblrqktx.html