js判断浏览器类型和版本
Posted 新宇泽起
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js判断浏览器类型和版本相关的知识，希望对你有一定的参考价值。
原网址：http://www.cnblogs.com/rubylouvre/archive/2009/10/14/1583362.html
除了另无它法，肯定不使用navigator.userAgent来判定浏览器。因为在第一次浏览器大战初期，Netscape占绝对统计地位，大部分人们不愿意兼容其他浏览器，并通过检测其UA让他们的网站只允许Netscape访问，这就逼使其他浏览器（包括IE）修改自己的UA伪装成Netscape来通过那些自以为是的脚本，于是出现每个人都声称自己是别人的局面，即使最新的IE9的UA也是:
//Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/5.0) |
下面我收集或独创的一些判定：
//IE8 新特征一览： http://www.cnblogs.com/rubylouvre/articles/1716755.html//2010 4 16日更新 ie678 = !+"\\v1" ; ie678 = !-[1,];//IE9预览版中失效 ie678 =\'\\v\'==\'v\' ; ie678 = (\'a~b\'.split(/(~)/))[1] == "b" ie678 = 0.9.toFixed(0) == "0" IE8 = window.toStaticHTML IE9 = window.msPerformance IE6-10 = !!document.createStyleSheet ie = !!document.recalc ie = !!window.VBArray ie = !!window.ActiveXObject ie678 = 0//@cc_on+1; ie = !!window.createPopup; ie = /*@cc_on!@*/!1; ie = document.expando;//document.all在opera firefox的古老版本也存在 ie = /\\w/.test(\'\\u0130\') //由群里的abcd友情提供 ie6 = !"1"[0] //利用IE6或IE5的字符串不能使用数组下标的特征 ie8 = !!window.XDomainRequest; ie9 = document.documentMode && document.documentMode === 9; //自创，基于条件编译的嗅探脚本，IE会返回其JS引擎的版本号，非IE返回0 var ieVersion = eval("\'\'+/*@cc_on"+" @_jscript_version@*/-0")*1 ie9 = ieVersion === 5.9 ie8 = ieVersion === 5.8 ie7 = ieVersion === 5.7 ie6 = ieVersion === 5.6 ie5 = ieVersion === 5.5 isIE11 =navigator.userAgent.indexOf("re:11")>0 //https://developer.mozilla.org/En/Windows_Media_in_Netscape netscape = !!window.GeckoActiveXObject gecko = !!window.netscape //包括firefox firefox = !!window.Components firefox = !!window.updateCommands firefox = !!window.sidebar safari = !!(navigator.vendor && navigator.vendor.match(/Apple/)) safari = window.openDatabase && !window.chrome; chrome= !!(window.chrome && window.google) opera=!!window.opera ; wpIE = \'msmaxtouchpoints\' in window.navigator //判定当前是否在IE的移动版中 //傲游2 3 maxthon = /maxthon/i.test(navigator.userAgent) //360安全浏览器 is360se = /360se/i.test(navigator.userAgent) |
//2010.6.4 setTimeout(function(){//FF的setTimeout总是有一个额余的参数0 var isFF = !!arguments.length; alert(isFF) }, 0); |
//判定IE版本2010.10.1 ie = (function(undefined){ var v = 3, div = document.createElement(\'div\'); while ( div.innerHTML = \'<!--[if gt IE \'+(++v)+\']><i></i><![endif]-->\', div.getElementsByTagName(\'i\')[0]); return v> 4 ? v : undefined; }()); |
//判定IE版本 2011.2.24 IE 条件注释在 ie = (function() { var v = 3, div = document.createElement(\'div\'); while (div.innerHTML = \'<!--[if gt IE \'+(++v)+\']>1<![endif]-->\', div.innerHTML); return v > 4 ? v : !v; }()); |
//手机的相关判定 2011.9.21 isIPhone = /iPhone/i.test(navigator.userAgent); isIPhone4 = window.devicePixelRatio >= 2//在网页中，pixel与point比值称为device-pixel-ratio，普通设备都是1，iPhone 4是2，有些android机型是1.5//http://blog.webcreativepark.net/2011/01/25-173502.htmlvar ua = navigator.userAgent;isAndroid = /Android/i.test(ua);isBlackBerry = /BlackBerry/i.test(ua)isWindowPhone = /IEMobile/i.test(ua)isios = /iPhone|iPad|iPod/i.test(ua)isMobile = isAndroid || isBlackBerry || isWindowPhone || isIOSif(window.external+"" == "undefined" || window.external == undefined) { //网站不能识别你的浏览器 不支持window.external 很可能为360浏览器 browseInfo.extend = "360SE"; browseInfo.name = "360浏览器"; } |
var pf = (navigator.platform || "").toLowerCase(), ua = navigator.userAgent.toLowerCase(), s;function toFixedVersion(ver, floatLength) { ver = ("" + ver).replace(/_/g, "."); floatLength = floatLength || 1; ver = String(ver).split("."); ver = ver[0] + "." + (ver[1] || "0"); ver = Number(ver).toFixed(floatLength); return ver;}function updateProperty(target, name, ver) { target = QApp[target] target.name = name; target.version = ver; target[name] = ver;}// 提供三个对象,每个对象都有name, version(version必然为字符串)// 取得用户操作系统名字与版本号，如果是0表示不是此操作系统var platform = QApp.platform = { name: (window.orientation != undefined) ? \'iPod\' : (pf.match(/mac|win|linux/i) || [\'unknown\'])[0], version: 0, iPod: 0, iPad: 0, iPhone: 0, android: 0, win: 0, linux: 0, mac: 0};(s = ua.match(/windows ([\\d.]+)/)) ? updateProperty("platform", "win", toFixedVersion(s[1])) : (s = ua.match(/windows nt ([\\d.]+)/)) ? updateProperty("platform", "win", toFixedVersion(s[1])) : (s = ua.match(/linux ([\\d.]+)/)) ? updateProperty("platform", "linux", toFixedVersion(s[1])) : (s = ua.match(/mac ([\\d.]+)/)) ? updateProperty("platform", "mac", toFixedVersion(s[1])) : (s = ua.match(/ipod ([\\d.]+)/)) ? updateProperty("platform", "iPod", toFixedVersion(s[1])) : (s = ua.match(/ipad[\\D]*os ([\\d_]+)/)) ? updateProperty("platform", "iPad", toFixedVersion(s[1])) : (s = ua.match(/iphone ([\\d.]+)/)) ? updateProperty("platform", "iPhone", toFixedVersion(s[1])) : (s = ua.match(/android ([\\d.]+)/)) ? updateProperty("platform", "android", toFixedVersion(s[1])) : 0;//============================================//取得用户的浏览器名与版本,如果是0表示不是此浏览器var browser = QApp.browser = { name: "unknown", version: 0, ie: 0, firefox: 0, chrome: 0, opera: 0, safari: 0, mobileSafari: 0, adobeAir: 0 //adobe 的air内嵌浏览器};(s = ua.match(/trident.*; rv\\:([\\d.]+)/)) ? updateProperty("browser", "ie", toFixedVersion(s[1])) : //IE11的UA改变了没有MSIE (s = ua.match(/msie ([\\d.]+)/)) ? updateProperty("browser", "ie", toFixedVersion(s[1])) : (s = ua.match(/firefox\\/([\\d.]+)/)) ? updateProperty("browser", "firefox", toFixedVersion(s[1])) : (s = ua.match(/chrome\\/([\\d.]+)/)) ? updateProperty("browser", "chrome", toFixedVersion(s[1])) : (s = ua.match(/opera.([\\d.]+)/)) ? updateProperty("browser", "opera", toFixedVersion(s[1])) : (s = ua.match(/adobeair\\/([\\d.]+)/)) ? updateProperty("browser", "adobeAir", toFixedVersion(s[1])) : (s = ua.match(/version\\/([\\d.]+).*safari/)) ? updateProperty("browser", "safari", toFixedVersion(s[1])) : 0;//下面是各种微调//mobile safari 判断，可与safari字段并存(s = ua.match(/version\\/([\\d.]+).*mobile.*safari/)) ? updateProperty("browser", "mobileSafari", toFixedVersion(s[1])) : 0;if (platform.iPad) { updateProperty("browser", \'mobileSafari\', \'0.0\');}if (browser.ie) { if (!document.documentMode) { document.documentMode = Math.floor(browser.ie) //http://msdn.microsoft.com/zh-cn/library/cc817574.aspx //IE下可以通过设置 <meta http-equiv="X-UA-Compatible" content="IE=8">改变渲染模式 //一切以实际渲染效果为准 } else if (document.documentMode !== Math.floor(browser.ie)) { updateProperty("browser", "ie", toFixedVersion(document.documentMode)) }}//============================================//取得用户浏览器的渲染引擎名与版本,如果是0表示不是此浏览器QApp.engine = { name: \'unknown\', version: 0, trident: 0, gecko: 0, webkit: 0, presto: 0};(s = ua.match(/trident\\/([\\d.]+)/)) ? updateProperty("engine", "trident", toFixedVersion(s[1])) : (s = ua.match(/gecko\\/([\\d.]+)/)) ? updateProperty("engine", "gecko", toFixedVersion(s[1])) : (s = ua.match(/applewebkit\\/([\\d.]+)/)) ? updateProperty("engine", "webkit", toFixedVersion(s[1])) : (s = ua.match(/presto\\/([\\d.]+)/)) ? updateProperty("engine", "presto", toFixedVersion(s[1])) : 0;if (QApp.browser.ie) { if (QApp.browser.ie == 6) { updateProperty("engine", "trident", toFixedVersion("4")); } else if (browser.ie == 7 || browser.ie == 8) { updateProperty("engine", "trident", toFixedVersion("5")); }}//by 司徒正美//thanks to//https://github.com/kissyteam/kissy/blob/master/src/ua/src/ua.js//https://github.com/AlloyTeam/JX/blob/master/src/jx.browser.js |
//判定浏览器是否支持某些重要特性require("avalon")QApp.support = { //判定是否支持CSS3的transition, animation,支持返回可用的属性名,不支持返回null //https://github.com/jquery/jquery-mobile/blob/master/js/animationComplete.js cssTransition: avalon.cssName("transition"), cssAnimation: avalon.cssName("animation"), cssAnimation3D: transform3dTest(), //判定是否支持伪元素 cssPseudoElement: !!avalon.cssName("content"), //现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-events的css属性。 //使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为 cssPointerEvents: cssPointerEventsTest(), boxShadow: !!avalon.cssName("boxShadow"), //http://stackoverflow.com/questions/15906508/chrome-browser-for-android-no-longer-supports-webkit-overflow-scrolling-is-the touchOverflow: !!avalon.cssName("overflow-scrolling"), //要弄明media query,先要了解一下media type，其实这个大家会比较熟悉一点， //我们通常会用到的media type会是all 和screen，然后是print， //一些网站会专门通过print类型为页面的打印格式提供更友好的界面。 //media type的浏览器支持 //* IE5.5/6/7不支持在@import中使用媒体类型 //* Safari/firefox只支持all,screen,print三种类型(包括iphone) //* Opera 完全支持 //* Opera mini 支持handheld，未指定则使用screen //* Windows Mobile系统中的IE支持handheld，其它支持不明… //media query是CSS 3对media type的增强，事实上我们可以将media query看成是media type+css属性判断。 // @media screen and (min-width:1024px) and (max-width:1280px){ // body{font-size:medium;} // } //详见 http://www.qianduan.net/media-type-and-media-query.html mediaquery: mediaTest("only all"), //https://github.com/jquery/jquery-mobile/blob/master/js/support/touch.js touch: "ontouchend" in document, //HTML5引进了history.pushState()方法和history.replaceState()方法，它们允许你逐条地添加和修改历史记录条目。 //这些方法可以协同window.onpopstate事件一起工作。 //https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history pushState: "pushState" in history && "replaceState" in history && // When running inside a FF iframe, calling replaceState causes an error !(window.navigator.userAgent.indexOf("Firefox") >= 0 && window.top !== window) && (window.navigator.userAgent.search(/CriOS/) === -1), boundingRect: typeof document.documentElement.getBoundingClientRect !== "undefined", orientation: "orientation" in window && "onorientationchange" in window, fixedPosition: true, //下面会修正 //http://stackoverflow.com/questions/5539354/svg-for-images-in-browsers-with-png-fallback inlineSVG:!! (window.SVGAngle && document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1") )}var matchMedia = window.matchMedia || (function(doc, undefined) { var bool, docElem = doc.documentElement, refNode = docElem.firstElementChild || docElem.firstChild, // fakeBody required for <ff4 when="" executed="" in="" <head=""> fakeBody = doc.createElement("body"), div = doc.createElement("div"); div.id = "mq-test-1"; div.style.cssText = "position:absolute;top:-100em"; fakeBody.style.background = "none"; fakeBody.appendChild(div); return function(q) { div.innerHTML = "<style media=\\"" + q + "\\"> #mq-test-1 { width: 42px; }</style>"; docElem.insertBefore(fakeBody, refNode); bool = div.offsetWidth === 42; docElem.removeChild(fakeBody); return { matches: bool, media: q }; };}(document));var mediaTest = function(q) { return matchMedia(q).matches;};function cssPointerEventsTest() { var element = document.createElement("x"), documentElement = document.documentElement, getComputedStyle = window.getComputedStyle, supports; if (!("pointerEvents" in element.style)) { return false; } element.style.pointerEvents = "auto"; element.style.pointerEvents = "x"; documentElement.appendChild(element); |