js 检测用户是否有安装该app

最新推荐文章于 2022-07-15 11:15:46 发布

前端成长营

最新推荐文章于 2022-07-15 11:15:46 发布

阅读量1.3k

点赞数 3

文章标签： js 检测用户安装app

本文链接：https://blog.csdn.net/weixin_43617604/article/details/102588853

版权

js 检测用户是否有安装该app

有关问题可以点击此处有其他参考代码
 点击此处有其他参考代码
 点击此处有其他参考代码



//通过这个方法来检测用户是否安装该应用

  var APP_STORE_URL = "https://";
	var APP_SCHEME_URL = "链接 " 
	var openStore = function () {
		location.href  = APP_STORE_URL;
	}

	var openApp = function () {
		testApp(APP_SCHEME_URL)
	}
	function testApp(url) {  //将连接作为iframe协议处理
		var timeout, t = 1000, hasApp = true;
		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 (!t1 || t2 - t1 < t + 100) {
				hasApp = false;
			}
		}, t);

		setTimeout(function () {
			if (hasApp) {
				location.href = APP_SCHEME_URL;
			} else {
				location.href = APP_STORE_URL;
			}
			document.body.removeChild(ifr);
		}, 2000)
	}

关于ios13 不能一些兼容性问题后期维护修改代码

var openApp = function () {
    if(isiOS){
        location.href  = APP_SCHEME_URL;  直接执行协议 唤醒失败说明没有安装
        setTimeout(function(){
            location.href  = APP_STORE_URL;  失败时safari浏览器会默认弹框提示  在自动执行进入商店
        },2500);
        return false;
    }else{
        testApp(APP_SCHEME_URL) 安卓部分在非浏览器中 是没有问题的  但是在浏览器端这里无法监听用户停留时间 所以当用户在提示框显示后 不执行任何操作 几秒后(自己设定的)会默认执行 进入商店就不能唤醒游戏
    }
}

以上代码不是很严谨但能实现功能有时候会有点问题

以下代码是完整的方法有些复杂

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>尝试打开APP的DEMO</title>
<link rel="stylesheet" href="/asserts/css/xmsCore.css" type="text/css" />
<style>
body{
    padding:5%;
}

.remark{
    margin-top:1em;
    color:#ababab;
}
</style>
</head>
<body>
    <h1>尝试打开APP的DEMO</h1>
    <div class = "custom-border border-color">
        <a id = "tryOpenApp" href = "http://pages.book.qq.com/pages/qidian/qddown/qdreader.htm">尝试打开起点读书</a>
    </div>
    <div class = "remark">目前在阅文集团，就以起点读书为例吧</div>
    <div class = "remark">如果安装了起点读书，那么打开，不然的话，会打开下载页</div>
<script type="text/javascript" src="/asserts/js/jquery.min.js"></script>
<script>
$(function () {

function _openAppUrl(appUrl){
    var ua = navigator.userAgent.toLocaleLowerCase(),
        openBrowser = null,
        deviceVersion = 0,
        matchVersion = null,
        openAppType = "",
        downLoadUrl = 'http://pages.book.qq.com/pages/qidian/qddown/qdreader.htm';
  
    //如果是在微信内部点击的时候
    if(ua.indexOf("micromessenger") != -1 ){
        _openAppUrl = function(){
            alert("DEMO，请在移动端的浏览器查看！");
        }
    }else{
        //在浏览器打开，判断是在移动端还是在PC端
        if(matchVersion = navigator.userAgent.match(/OS\s*(\d+)/)){
            //赋值，并且判断
            //IOS设备的浏览器
            deviceVersion = matchVersion[1] || 0;
  
            if(deviceVersion - 9 >= 0){
                openAppType = "newType";
            }
        }else if(matchVersion = navigator.userAgent.match(/Android\s*(\d+)/)){
            //Android的设备
            deviceVersion = matchVersion[1] || 0;
  
            if(deviceVersion - 5 >= 0){
                openAppType = "newType";
            }
  
        }else{
            //PC端的设备
            openAppType = "pc";
        }
  
  
        if(openAppType == "pc"){
            _openAppUrl = function(){
                alert("DEMO，请在移动端的浏览器查看！");
            }
        }else if(openAppType == "newType"){
            //使用新的方法，尝试打开APP
            //IOS>9,Android>5的版本
            _openAppUrl = function(url){
                var history = window.history,
                    body = $("body").eq(0),
                    ifr = $('<iframe class = "full-screen dn" style = "z-index:101;border:none;width:100%;height:100%;" src="'+downLoadUrl+'"></iframe>');
  
                body.append(ifr);
                $(window).on("popstate",function(e){
                    var state = history.state;
                    
                    if(!state){
                        ifr.addClass("dn");
                    }
                });
  
                function _show(){
                    history.pushState({}, "下载APP链接页", "");
                    ifr.removeClass("dn");
                }
  
                _openAppUrl = function(url){
                    location.href = url;
                    _show();
                }
  
                _openAppUrl(url);
  
            }
        }else{
            //使用计算时差的方案打开APP
            var checkOpen = function (cb){
                var _clickTime = +(new Date()),
                    _count = 0,
                    intHandle = 0;
  
                //启动间隔20ms运行的定时器，并检测累计消耗时间是否超过3000ms，超过则结束
                intHandle = setInterval(function(){
                    _count++;
                    var elsTime = +(new Date()) - _clickTime;
                    
                    if (_count>=100 || elsTime > 3000 ) {
                        clearInterval(intHandle);
                        //计算结束，根据不同，做不同的跳转处理，0表示已经跳转APP成功了
                        if ( elsTime > 3000 || document.hidden || document.webkitHidden) {
                            cb(0);
                        } else {
                            cb(1);
                        }
                          
                    }
                }, 20);
            }
  
            _openAppUrl = function(url){
                var ifr = document.createElement('iframe');
  
                ifr.src = url;
                ifr.style.display = 'none';
  
                checkOpen(function(opened){
                    if(opened === 1){
                        location.href = downLoadUrl;
                    }
                });
  
                document.body.appendChild(ifr);
  
                setTimeout(function() {
                    document.body.removeChild(ifr);
                }, 2000);
            }
  
        }
  
    }
  
    _openAppUrl(appUrl);

}
  
    var appUrl = "QDReader://";
  
    $("#tryOpenApp").on("click",function(){
        _openAppUrl(appUrl);
        return false;
    });
	
});
</script>
</body>
</html>

相关案例前往
PC端看源码链接：点击查看

前端成长营

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
js 检测用户是否有安装该app

js 检测用户是否有安装该app有关问题可以点击此处有其他参考代码//通过这个方法来检测用户是否安装该应用 var APP_STORE_URL = "https://"; var APP_SCHEME_URL = "链接 " var openStore = function () { location.href = APP_STORE_URL; } var openAp...
复制链接

扫一扫