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>

参考链接

JavaScript检测浏览器的更多相关文章

  1. Javascript检测浏览器对CSS属性的支持 /* supports */

    //检测浏览器对CSS属性的支持 supports = (function() { var div = document.createElement('div'), vendors = 'Khtml ...

  2. 用 JavaScript 检测浏览器在线/离线状态（JavaScript API — navigator.onLine）

    如今HTML5 移动应用或 Web app 中越来越普遍的使用了离线浏览技术,所以用 JavaScript 检测浏览器在线/离线状态非常常见. 无论浏览器是否在线,navigator.onLine 属 ...

  3. 使用JavaScript检测浏览器

    假设你真的需要检测浏览器的类型,使用JavaScript非常easy达到. View Demo Download Source from GitHub JavaScript有一个navigator的标 ...

  4. javascript检测浏览器的缩放状态实现代码 是指浏览器网页内容的百分比缩放（按Ctrl和+号键或者-号键的缩放）

    这里所说的缩放不是指浏览器大小的缩放,而是指浏览器网页内容的百分比缩放(按Ctrl和+号键或者-号键的缩放).检测这种缩放有很种方法,QQ空间都通过flash来检测浏览器是否处于缩放.这里提供java ...

  5. [译]JavaScript检测浏览器前缀

    原文地址: Detect Vendor Prefix with JavaScript 不管浏览器私有前缀的现状如何,我们还是要与之为伴,并且有时候还需要利用它来做一些事情.这些前缀可以用于CSS(比如 ...

  6. javascript 检测浏览器类型和版本的代码

    方法1:对象/特征检测法 该方法是一种判断浏览器能力(而非浏览器的确切型号)的通用方法.大部分JS专家认为这个方法最合适,因为他们认为按照该方法所编写的脚本是经得起未来考验的. //获取IE浏览器的版 ...

  7. 检测浏览器版本类型的JavaScript代码，终极版

    下面的JavaScript代码,不仅可以判断PC端浏览器类型,还可以判断安卓.iOS.其他智能手机.平板电脑或游戏系统. 说废话貌似不是我的风格哈,直接上代码吧: var client = funct ...

  8. javascript检测当前浏览器是否为微信浏览器

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  9. [转]JavaScript快速检测浏览器对CSS3特性的支持

    转自:https://yuguo.us/weblog/detect-css-support-in-browsers-with-javascript/ ------------------------- ...

随机推荐

  1. API 设计 POSIX File API

    小结: 1. https://mp.weixin.qq.com/s/qWrSyzJ54YEw8sLCxAEKlA API 设计最佳实践的思考 谷朴 阿里技术 昨天   阿里妹导读:API 是模块或者子 ...

  2. 阶段5 3.微服务项目【学成在线】_day18 用户授权_19-微服务之间认证-Feign 拦截器

    4.2 Feign 拦截器 4.2.1 定义Feign拦截器 微服务之间使用feign进行远程调用,采用feign拦截器实现远程调用携带JWT. 在common工程添加依赖: <dependen ...

  3. Spring Boot使用监听器Listener

    之前介绍了在Spring Boot中使用过滤器:https://www.cnblogs.com/zifeiy/p/9911056.html 接下来介绍使用监听器Listener. 下面是一个例子: p ...

  4. 【笔记】Docker部署Nginx，并修改配置文件

    先来一个删除命令:) root@fudonghai:~# rm -rf /usr/docker/nginx/{conf.d,html,log} root@fudonghai:~# rm -r /usr ...

  5. dede织梦5.7的安全防护设置

    dede安全是一直令人堪忧的,但是其用来建网站很方便,如果我们使用dede来建站,一定要做好安全防护工作. 下面总结一下dede织梦5.7的安全防护设置 1.更改管理员名称和密码,尽可能设置的复杂一下 ...

  6. 【c# 学习笔记】显示接口实现方法

    在接口  一张中,使用了隐式的接口实现方式,即在实现代码中没有制定实现那个接口中的CompareTo方法.相应地,自然就有显式的 接口实现方式,它指的是在实现过程中,明确指出实现哪一个接口中的哪一个方 ...

  7. Vue Router的导航解析过程

    在我没读官方的vue router文档之前,我怎么也没想到路由的解析过程竟然有12步. 12步如下: 导航被触发. 在失活的组件里调用离开守卫beforeRouteLeave . 调用全局的 befo ...

  8. 【C/C++】缓冲区设计--环形队列

    原文链接:http://blog.csdn.net/billow_zhang/article/details/4420789 在程序的两个模块间进行通讯的时候,缓冲区成为一个经常使用的机制. 如上图, ...

  9. 最新 美柚java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿. 美柚等10家互联网公司的校招Offer,因为某些自身原因最终选择了 美柚.6.7月主要是做系统复习.项目复盘.LeetCo ...

  10. mysql主从同步原理及错误解决

    mysql主从同步的原理: 1.在master上开启bin-log日志功能,记录更新.插入.删除的语句. 2.必须开启三个线程,主上开启io线程,从上开启io线程和sql线程. 3.从上io线程去连接 ...