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>
    

    参考链接

  • 相关阅读:
    陶瓷电容的结构、工艺、失效模式
    Vue.js最佳实践
    Vue 超快速学习
    CSS 小技巧
    HTML5 Canvas
    webkit下面的CSS设置滚动条
    Some untracked working tree files would be overwritten by checkout. Please move or remove them before you can checkout. View them
    JSCS: Please specify path to 'JSCS' package
    React中ref的使用方法
    React 60S倒计时
  • 原文地址:https://www.cnblogs.com/rohmeng/p/11235203.html
Copyright © 2011-2022 走看看