JavaScript检测浏览器
Posted rohmeng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>参考链接
http://www.webhek.com/post/detecting-chrome-headless.html
https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
https://www.whatismybrowser.com/developers/tools/iframe
- https://gist.github.com/2107/5529665
https://stackoverflow.com/questions/17278770/how-do-i-detect-chromium-specifically-vs-chrome
以上是关于JavaScript检测浏览器的主要内容，如果未能解决你的问题，请参考以下文章