js打开app应用或进入下载页面

最新推荐文章于 2023-12-01 11:19:06 发布

三丨

最新推荐文章于 2023-12-01 11:19:06 发布

阅读量9.9k

点赞数 2

分类专栏： js HTML5 文章标签： js打开app IOS9 javascript app 判断设备

本文链接：https://blog.csdn.net/wfwfwf128/article/details/51890857

版权

js 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

HTML5

2 篇文章 0 订阅

订阅专栏

很多做 web 开发的一定遇到过这种需求：打开一个页面，如果装了应用，就打开该应用；没装的时候，iOS 跳 App Store 下载，Android 跳到下载 apk 包的页面。

网上提供的方法很多，但是呢，很多都有各种各样的问题，特别是iOS 9上的兼容更是一个大问题。下面是我结合网上的方法，改出的版本，现存的问题是在IOS9上，如果没有安装应用时，就会有一个提示框弹出，提示无法打开网页，点击确定后，才能跳到正确页面。目前是没有什么好办法，如果哪位大神知道，可以在下面给出回复，不胜感激。

废话不多说，直接上代码：

<!DOCTYPE html >
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"></meta>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"></meta>
    <title></title>
    <meta charset="UTF-8">
    <style type="text/css">
        html,body{
            height:100%;
            margin: 0px;
            padding: 0px;
        }
        body {
			background-image: url(/system/common/images/wei_down_bg.png);   //用于提示微信，QQ用户在浏览器中打开此网页面
			background-position: center center;
			background-repeat: no-repeat;
			background-attachment: fixed;
			background-size: cover;
		}
    </style>
    
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
    var openAppHref,officialHref;
    
    var browser = {
	    ua: function () {
	        var u = navigator.userAgent;
	        var isChrome = u.match(/Chrome\/([\d.]+)/) || u.match(/CriOS\/([\d.]+)/);
	        var isAndroid = u.match(/(Android);?[\s\/]+([\d.]+)?/);
	        var iosVersion = function () {
	            if (/iP(hone|od|ad)/.test(navigator.platform)) {
	                var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
	                return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
	            }
	        }();
	        var chromeVersion = function () {
	            var chrome = navigator.userAgent.match(/Chrome\/(\d+)\./);
	            if (chrome) {
	                return parseInt(chrome[1], 10);
	            }
	        }();
	        var ios9 = iosVersion && iosVersion[0] >= 9;
	        var chrome18 = isChrome && isAndroid && chromeVersion && chromeVersion > 18;
	        return {         //移动终端浏览器版本信息
	            trident: u.indexOf('Trident') > -1, //IE内核
	            presto: u.indexOf('Presto') > -1, //opera内核
	            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
	            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
	            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
	            iOS: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
	            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
	            iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
	            iPad: u.indexOf('iPad') > -1, //是否iPad
	            webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
	            weChat: u.indexOf('MicroMessenger') > -1,
	            UC: u.indexOf('UCBrowser') > -1,
	            u3: u.indexOf('U3') > -1,
	            chrome: u.indexOf('Chrome') > -1,
	            windowsPhone: u.indexOf("Windows Phone") > -1,
	            samsung: u.indexOf("Samsung") > -1,
	            QQ: (u.match(/\sQQ/i)!=null ? u.match(/\sQQ/i).toLowerCase() == " qq":false),
	            isChrome: isChrome,
	            isAndroid: isAndroid,
	            iosVersion: iosVersion,
	            chromeVersion: chromeVersion,
	            ios9: ios9,
	            chrome18: chrome18
	        };
	    }()
	}
    var ua = browser.ua;
    /**
     * 尝试跳转openAppHref,如果跳转失败，进入officialHref
     */
    function timeoutRedirect() {
        var startTime = Date.now();
        var timeout = 500;
        openApp();
        var t = setTimeout(function () {
            var endTime = Date.now();
            if (endTime - startTime < timeout + 100) {   //若启动应用，则js会被中断较长时间，超出此范围
                if (ua.ios9) {   //ios9会弹出确认按钮，时间一定会超出
                    openH5();    //此处请各位自行处理，暂时没有找到好的办法
                    return;
                }
                openH5();
            }
        }, timeout);
        window.beforeunload = function () {
            clearTimeout(t);
        }
        window.pagehide = function () {
            clearTimeout(t);
        }
        window.onblur = function () {
            clearTimeout(t);
        }
    }
    function openH5() {
        window.location.href = officialHref;
    }
    function openApp() {
        openAppByIframe();
        if (ua.ios9) {
            window.location = openAppHref;
            
            return;
        }
        if (ua.chrome18) {
            window.location = openAppHref;
            return;
        }
    }
    function openAppByIframe() {
    	if (!openAppHref ) {
    		window.location = officialHref;
    		return ;
    	}
    	if (ua.android) { 
    		window.location = openAppHref;
            return ;
        }
    	if (ua.ios9) {return;}
        var iframe = document.createElement("iframe");
        iframe.style.display = "none";
        iframe.style.border = "none";
        iframe.style.width = "1px";
        iframe.style.height = "1px";
        iframe.src = openAppHref;
        document.body.appendChild(iframe);
    }
    
    $(function () {
        

            
		if (ua.android) {
			openAppHref =  "myapp://mpp/wf";//打开某手机上的某个app应用, myapp需要与android配制对应
			officialHref = "下载APK的地址";
		} else if (ua.iOS){
			openAppHref =  "myapp://";//打开某手机上的某个app应用
			officialHref = "下载APP的地址";
		}
        
        if (ua.weChat && ua.iOS) { //iOS上的微信webview
            return ;
        } else if (ua.weChat && ua.android) { //安卓上的微信webview
            return ;
        } else if (ua.windowsPhone) {//winphone
            return ;
        } else {
            if ((ua.UC && ua.android && !ua.u3 && !ua.chrome)) {
                //浏览器不支持
                return ;
            } else {
                //chrome某些版本不允许自动进入app，手动点击触发重定向
                timeoutRedirect();
            }
        }
    })
    
    </script>
</head>
<body>
    
    
    
    
    
</body>
</html><!--[if !IE]>|xGv00|7d924dab7190c026e09e967c211a9ff8<![endif]-->

因为我做的项目没有winphone版的，所以我的链接只提供了android和ios的。