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>