js判断移动端是或不是安装某款app的二种办法,
分类:计算机知识

其他

   window.location = "要跳转的页面UEvoqueL";

第一步:通过iframe打开App

Android平台则相继app厂家差别十分的大,譬如Chrome从25及之后就不再扶助通过js触发(非客商点击),所以那边运用iframe src地址等来触发scheme。

//在iframe 中打开APP var ifr = document.createElement('iframe'); ifr.src = openUrl; ifr.style.display = 'none';

1
2
3
4
    //在iframe 中打开APP
    var ifr = document.createElement('iframe');
    ifr.src = openUrl;
    ifr.style.display = 'none';

     if (!t1 || t2 - t1 < t + 100) {

uri获取

此间的uri,指得就是通过 Url scheme 来促成的H5与安卓、苹果采纳之间的跳转链接。

小编们须求找到客户端的同事,来博取如下格式的链接。

xx://'跳转页面'/'指引参数'

1
xx://'跳转页面'/'携带参数'

此间给大家轻巧解释下url scheme。

url 就是我们经常通晓的链接。
scheme 是指url链接中的最先地点,正是上边链接中 ‘xx’的职分。
详见介绍能够看这里:使用url scheme详解

用这些链接我们能够跳转到 应用中的有些页面,并得以教导一定的参数。这么些是大家贯彻那个成效的前提哟。

  var ifr = document.createElement("iframe");

注意点:
  • 微链接是应用宝提供的,能够在后台获取。
  • 行使微链接必须做encodeURIComponent转义。
  • 链接地址在微链接后拼接二个android_schema参数加你的uri。

      function android(){

函数中调用的BrowserInfo是四个总结的顾客端检查评定。具体如下:

/** * 客商端检查实验 */ export const BrowserInfo = function() { var json = { userAgent: navigator.userAgent.toLowerCase(), isAndroid: Boolean(navigator.userAgent.match(/android/ig)), isIphone: Boolean(navigator.userAgent.match(/iphone|ipod/ig)), isIpad: Boolean(navigator.userAgent.match(/ipad/ig)), isWeixin: Boolean(navigator.userAgent.match(/MicroMessenger/ig)), } return json; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
* 客户端检测
*/
export const BrowserInfo = function() {
  var json = {
    userAgent: navigator.userAgent.toLowerCase(),
    isAndroid: Boolean(navigator.userAgent.match(/android/ig)),
    isIphone: Boolean(navigator.userAgent.match(/iphone|ipod/ig)),
    isIpad: Boolean(navigator.userAgent.match(/ipad/ig)),
    isWeixin: Boolean(navigator.userAgent.match(/MicroMessenger/ig)),
  }
  
  return json;
}

第三种方法:

你恐怕会遇见的主题材料

  • 如何是uri,获取uri须求怎样帮助?
  • 安卓中采用切换成后台, 计时器仍会不断运维有哪些化解办法?
  • 微信中不辅助第三方uri,下载使用。怎么消除来造成跳转到本人app。

都会在文中找到答案。

  } catch(e) {}

其三步:微信中贯彻张开or下载使用效用

这里运用的是应用宝微链接实现。

if (callback) { //顾客端检查测验微信间接跳应用宝链接 var browser = BrowserInfo(); //使用微链接 var encodeUri = encodeU陆风X8IComponent('你的uri'); if (browser.isWeixin) { window.location.href = '你的微链url&android_schema='+encodeUri; }else{ checkOpen(function(opened){ callback && callback(opened); }); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
if (callback) {
      //客户端检测微信直接跳应用宝链接
      var browser = BrowserInfo();
      //使用微链接
      var encodeUri = encodeURIComponent('你的uri');
 
      if (browser.isWeixin) {
        window.location.href = '你的微链url&android_schema='+encodeUri;
      
      }else{
        checkOpen(function(opened){
            callback && callback(opened);
        });
    
      }
    }

 if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {

H5页检验手提式有线话机是还是不是安装app 相关流程

2017/04/21 · HTML5 · 2 评论 · H5

初稿出处: sunsmeill   

新近企业索要针对享受流程张开优化,个中一些正是前端H5检查测验是不是安装使用,来进展不相同的判别(下载或间接跳转到app中)。原理很简短:创设三个iframe去打开uri。就算展开app成功网页进入后台,再切换回来时间会超越2.5s。使用时间去检测。下边来看具体贯彻进程:

  try {

其次步: 剖断是还是不是安装某采纳

规律:若通过url scheme 张开app成功,那么当前h5会步入后台,通过测量时间的装置会有确定延迟。利用时间来剖断。

//检查app是还是不是展开 function checkOpen(cb){ var _clickTime = +(new Date()); function check(elsTime) { if ( elsTime > 三千 || document.hidden || document.webkitHidden) { cb(1); } else { cb(0); } } //运维间隔20ms运维的沙漏,并检查实验累计耗费时间是否超越2000ms,抢先则结束var _count = 0, intHandle; intHandle = setInterval(function(){ _count++; var elsTime = +(new Date()) - _clickTime; if (_count>=100 || elsTime > 3000 ) { clearInterval(intHandle); check(elsTime); } }, 20); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    //检查app是否打开
    function checkOpen(cb){
        var _clickTime = +(new Date());
        function check(elsTime) {
            if ( elsTime > 3000 || document.hidden || document.webkitHidden) {
                cb(1);
            } else {
                cb(0);
            }
        }
        //启动间隔20ms运行的定时器,并检测累计消耗时间是否超过3000ms,超过则结束
        var _count = 0, intHandle;
        intHandle = setInterval(function(){
            _count++;        
            var elsTime = +(new Date()) - _clickTime;
            if (_count>=100 || elsTime > 3000 ) {
                clearInterval(intHandle);
                check(elsTime);
            }
        }, 20);
    }

           window.location.href = ""; /***下载app的地址***/

总体函数

export const openApp = function(openUrl, callback) { //检查app是或不是展开function checkOpen(cb){ var _clickTime = +(new Date()); function check(elsTime) { if ( elsTime > 三千 || document.hidden || document.webkitHidden) { cb(1); } else { cb(0); } } //运维间隔20ms运转的沙漏,并检验累计耗时是还是不是超过2000ms,抢先则甘休var _count = 0, intHandle; intHandle = setInterval(function(){ _count++; var elsTime = +(new Date()) - _clickTime; if (_count>=100 || elsTime > 两千 ) { clearInterval(intHandle); check(elsTime); } }, 20); } //在iframe 中展开应用程式 var ifr = document.createElement('iframe'); ifr.src = openUrl; ifr.style.display = 'none'; if (callback) { //顾客端检查测量检验微信直接跳应用宝链接 var browser = BrowserInfo(); //使用微链接 var encodeUri = encodeUWranglerIComponent(openUrl); if (browser.isWeixin) { window.location.href = '你的微链url&android_schema='+encodeUri; }else{ checkOpen(function(opened){ callback && callback(opened); }); } } document.body.appendChild(ifr); setTimeout(function() { document.body.removeChild(ifr); }, 2000); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
export const openApp = function(openUrl, callback) {
    //检查app是否打开
    function checkOpen(cb){
        var _clickTime = +(new Date());
        function check(elsTime) {
            if ( elsTime > 3000 || document.hidden || document.webkitHidden) {
                cb(1);
            } else {
                cb(0);
            }
        }
        //启动间隔20ms运行的定时器,并检测累计消耗时间是否超过3000ms,超过则结束
        var _count = 0, intHandle;
        intHandle = setInterval(function(){
            _count++;        
            var elsTime = +(new Date()) - _clickTime;
            if (_count>=100 || elsTime > 3000 ) {
                clearInterval(intHandle);
                check(elsTime);
            }
        }, 20);
    }
  
    //在iframe 中打开APP
    var ifr = document.createElement('iframe');
    ifr.src = openUrl;
    ifr.style.display = 'none';
 
    if (callback) {
      //客户端检测微信直接跳应用宝链接
      var browser = BrowserInfo();
      //使用微链接
      var encodeUri = encodeURIComponent(openUrl);
 
      if (browser.isWeixin) {
        window.location.href = '你的微链url&android_schema='+encodeUri;
      }else{
        checkOpen(function(opened){
            callback && callback(opened);
        });
    
      }
    }
    
    document.body.appendChild(ifr);      
    setTimeout(function() {
        document.body.removeChild(ifr);
    }, 2000);  
 
}

      };

注意:
  • 出于安卓手提式有线话机,页面步向后台,计时器setTimeout仍会随处运维,所以这里运用setInterval,十分小间隔时间重复数十次。来依照累计时间判断。
  • cb为回调函数,根据再次来到0 or 1来决断是或不是安装。
  • document.hidden对抢先4.4webview协助很好,为页面可知性api。

 

切切实实贯彻

  var timeout, t = 1000, hasApp = true;

回调函数的施用

页面中能够透过传递回调函数,来获得重回值;并由此是还是不是传那几个参数来做步向页面检查评定。

1 赞 6 收藏 2 评论

图片 1

   state = window.open("apps custom url schemes ", '_blank');

       hasApp = false;

js代码:

    window.location = "要跳转的页面U纳瓦拉L";

    } else {

   } else {

apps custom url schemes 是何等呢? 其实就是你与应用程式约定的三个商业事务U奥迪Q5L,你的IOS同事或Android同事在写程序的时候会安装多少个UWranglerL Scheme,
比方说设置:
URL Scheme :app
接下来别的的次第就足以因此UEnclaveLString = app://  调用该应用。
还能够传参数,如:
app://reaction/?uid=1
原理:
500ms内,本机有应用程序能分析这些契约并张开程序,调用该采纳;借使本机未有应用程序能深入分析该公约恐怕500ms内并未有张开这些程序,则实行setTimeout里面包车型大巴function,便是跳转到你想跳转的页面。

   window.close();

function testApp(url) {

  }, t);

</script>

     }

var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

      function ios(){

if(isAndroid){

      alert('安装了app');

    window.close();

  }

    if (hasApp) {

var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端恐怕uc浏览器

           window.location.href = ""; /***打开app的公约,有安卓同事提供***/

   if (timeOutDateTime - loadDateTime < 5000) {

上述就是js判别移动端是还是不是安装某款app的有余方法,希望对大家的求学抱有帮衬。

其两种艺术:

  timeout = setTimeout(function () {

  setTimeout(function () {

}

     var t2 = Date.now();

        window.location.href = "openwjtr://com.tyrbl.wjtr"; /***打开app的合计,有安卓同事提供***/

        var ifr = document.createElement("iframe");

  var loadDateTime = new Date();

本文由威尼斯手机娱乐官网发布于计算机知识,转载请注明出处:js判断移动端是或不是安装某款app的二种办法,

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文