js判断客户端是iOS仍是Android移动终端

时间 2019-11-06

标签判断客户端 ios 仍是 android 移动终端栏目 JavaScript 繁體版

原文原文链接

前段时间，小颖公司须要实现：用户在微信中打开一个html5，在该html5中经过点击下载按钮，Android手机会跳到Android的下载地址，IOS会跳转到IOS下载地址，其它则跳转到另外一个指定地址。javascript

1.若用户是在浏览器中打开该html5，点击下载按钮后会跳转到相应的版本app下载地址。php

2.若用户在微信中打开该html5，则先提示用户，用浏览器打开该html5，而后在浏览器中打开该html5后，再点击下载按钮跳转到相应的版本app下载地址。html

具体实现方法：html5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>安装</title>
</head>
<body>
<div class="view-container">
    <div class="etc-handle">
        <a href="javascript:void(0)" onclick="downApp()">点击安装</a>
    </div>
</div>

<script type="text/javascript">
    (function(){
       window.alert = function(name){
        var iframe = document.createElement("IFRAME");
        iframe.style.display="none";
        iframe.setAttribute("src", 'data:text/plain');
        document.documentElement.appendChild(iframe);
        window.frames[0].window.alert(name);
        iframe.parentNode.removeChild(iframe);
        }
      })();
    var browser = {
        versions: function () {
            var u = navigator.userAgent, app = navigator.appVersion;
            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应该程序，没有头部与底部
            };
        }(),
        language: (navigator.browserLanguage || navigator.language).toLowerCase()
    }
    function downApp(){
        var urls = {
            'android':'XXX.apk',
            'ios':'XXX/id1438617787',
            'other':'https://www.baidu.com/index.php?tn=monline_3_dg'
        };
        if (browser.versions.mobile) {//判断是不是移动设备打开。browser代码在下面
            var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
            if (ua.match(/MicroMessenger/i) == "micromessenger") {
                alert("点击右上角按钮，而后再弹出的菜单中，点击在浏览器中打开，便可安装");
            }else if (browser.versions.ios) {
                window.location.href=urls.ios;
            }
            else if(browser.versions.android){
                window.location.href=urls.android;
            }
        } else {
            window.location.href=urls.other;
        }
    }
</script>
</body>
</html>