zoukankan      html  css  js  c++  java
  • JavaScript检测浏览器

    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>
    

    参考链接

  • 相关阅读:
    ObjectQuery查询及方法
    SQL系列(十三)—— 关于表的DDL
    SQL系列(十二)—— insert update delete
    Git Push 避免用户名和密码方法
    Git系列 —— github提交一个空目录
    Git系列 —— 记一次Mac上git push时总是403的错误
    Mysql系列(三)—— Mysql主从复制配置
    SQL系列(十一)—— 函数(function)
    SQL系列(十)—— 联结(join)
    动态代理(二)—— CGLIB代理原理
  • 原文地址:https://www.cnblogs.com/rohmeng/p/11235203.html
Copyright © 2011-2022 走看看