JavaScript检测浏览器

让人想犯罪 __ 提交于 2020-03-29 09:18:46

Detect Browser

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>detect browser</title>
</head>
<body>
    <div id="welcome">
        <p>欢迎使用 <b></b> detect browser</p>
    </div>
    
    //使用whatismybrowser网站检测
    <iframe src ="https://www.whatismybrowser.com/feature/iframe?size=small&bgcolor=BFBFB0&color=3E4759&bordercolor=8C7268&capabilities=true&screen=true&ip_address=true&viewmore=true" width ="340" height ="330" style ="border:none;"></iframe>
    
    <script type="text/javascript">
        window.onload=function(){
            console.log("start:");
            //检测无头浏览器
            if (/HeadlessChrome/.test(window.navigator.userAgent)) {
                console.log("Chrome headless detected");
            }
            if(navigator.plugins.length == 0) {
                console.log("It may be Chrome headless");
            }
            if(navigator.languages == "") {
                console.log("Chrome headless detected");
            }

            var canvas = document.createElement('canvas');
            var gl = canvas.getContext('webgl');

            var debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
            var vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
            var renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);

            if(vendor == "Brian Paul" && renderer == "Mesa OffScreen") {
                console.log("Chrome headless detected");
            }
            
            
            // if(!Modernizr["hairline"]) {
            //     console.log("It may be Chrome headless");
            // }
            
            
            var body = document.getElementsByTagName("body")[0];
            var image = document.createElement("img");
            image.src = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=144388917,3393541021&fm=27&gp=0.jpg";
            image.setAttribute("id", "fakeimage");
            body.appendChild(image);
            image.onerror = function(){
                if(image.width == 0 && image.height == 0) {
                    console.log("Chrome headless detected");
                }
            }

            // 判断浏览器
            // Opera 8.0+
            var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

            // Firefox 1.0+
            var isFirefox = typeof InstallTrigger !== 'undefined';

            // Safari 3.0+ "[object HTMLElementConstructor]" 
            var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));

            // Internet Explorer 6-11
            var isIE = /*@cc_on!@*/false || !!document.documentMode;

            // Edge 20+
            var isEdge = !isIE && !!window.StyleMedia;

            // Chrome 1 - 71
            var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

            // Blink engine detection
            var isBlink = (isChrome || isOpera) && !!window.CSS;


            var output = 'Detecting browsers by ducktyping:<hr>';
            output += 'isFirefox: ' + isFirefox + '<br>';
            output += 'isChrome: ' + isChrome + '<br>';
            output += 'isSafari: ' + isSafari + '<br>';
            output += 'isOpera: ' + isOpera + '<br>';
            output += 'isIE: ' + isIE + '<br>';
            output += 'isEdge: ' + isEdge + '<br>';
            output += 'isBlink: ' + isBlink + '<br>';
            console.log(output);

            //浏览器、版本、操作系统检测
            var BrowserDetect = {
                init: function() {
        		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
        		this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "an unknown version";
        		this.OS = this.searchString(this.dataOS) || "an unknown OS";
        
                console.log(this.browser);
                console.log(this.version);
                console.log(this.OS);
        	},
        	searchString: function(data) {
        		for (var i = 0; i < data.length; i++) {
        			var dataString = data[i].string;
        			var dataProp = data[i].prop;
        			this.versionSearchString = data[i].versionSearch || data[i].identity;
        			if (dataString) {
        				if (dataString.indexOf(data[i].subString) != -1) return data[i].identity;
        			} else if (dataProp) return data[i].identity;
        		}
        	},
        	searchVersion: function(dataString) {
        		var index = dataString.indexOf(this.versionSearchString);
        		if (index == -1) return;
        		return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
        	},
        	dataBrowser: [{
        		string: navigator.userAgent,
        		subString: "Chrome",
        		identity: "Chrome"
        	}, {
        		string: navigator.userAgent,
        		subString: "OmniWeb",
        		versionSearch: "OmniWeb/",
        		identity: "OmniWeb"
        	}, {
        		string: navigator.vendor,
        		subString: "Apple",
        		identity: "Safari",
        		versionSearch: "Version"
        	}, {
        		prop: window.opera,
        		identity: "Opera",
        		versionSearch: "Version"
        	}, {
        		string: navigator.vendor,
        		subString: "iCab",
        		identity: "iCab"
        	}, {
        		string: navigator.vendor,
        		subString: "KDE",
        		identity: "Konqueror"
        	}, {
        		string: navigator.userAgent,
        		subString: "Firefox",
        		identity: "Firefox"
        	}, {
        		string: navigator.vendor,
        		subString: "Camino",
        		identity: "Camino"
        	}, { // for newer Netscapes (6+)
        		string: navigator.userAgent,
        		subString: "Netscape",
        		identity: "Netscape"
        	}, {
        		string: navigator.userAgent,
        		subString: "MSIE",
        		identity: "Explorer",
        		versionSearch: "MSIE"
        	}, {
        		string: navigator.userAgent,
        		subString: "Gecko",
        		identity: "Mozilla",
        		versionSearch: "rv"
        	}, { // for older Netscapes (4-)
        		string: navigator.userAgent,
        		subString: "Mozilla",
        		identity: "Netscape",
        		versionSearch: "Mozilla"
        	}],
        	dataOS: [{
        		string: navigator.platform,
        		subString: "Win",
        		identity: "Windows"
        	}, {
        		string: navigator.platform,
        		subString: "Mac",
        		identity: "Mac"
        	}, {
        		string: navigator.userAgent,
        		subString: "iPhone",
        		identity: "iPhone/iPod"
        	}, {
        		string: navigator.platform,
        		subString: "Linux",
        		identity: "Linux"
        	}]
        
        };
        BrowserDetect.init();

        // mobile 
        var isMobile = {
            Android: function() {
                return navigator.userAgent.match(/Android/i);
            },
            BlackBerry: function() {
                return navigator.userAgent.match(/BlackBerry/i);
            },
            iOS: function() {
                return navigator.userAgent.match(/iPhone|iPad|iPod/i);
            },
            Opera: function() {
                return navigator.userAgent.match(/Opera Mini/i);
            },
            Windows: function() {
                return navigator.userAgent.match(/IEMobile/i);
            },
            any: function() {
                return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
            }
        };
        console.log("end!");
    }
    
    //判断Chromium
    function isChromium()
    { 
        for (var i = 0, u="Chromium", l =u.length; i < navigator.plugins.length; i++)
        {
            if (navigator.plugins[i].name != null && navigator.plugins[i].name.substr(0, l) === u)
                return true;
        }
        return false;
    }
    </script>
</body>
</html>

参考链接

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!