美文网首页
前端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