javascript判断浏览器类型与版本

时间: 2020-03-11阅读: 201标签: 浏览器

除了另无它法,肯定不使用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
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.html
var 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 || isIOS

if(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);
supports = getComputedStyle &&
getComputedStyle(element, "").pointerEvents === "auto";
documentElement.removeChild(element);
return !!supports;
}

//http://stackoverflow.com/questions/5661671/detecting-transform-translate3d-support
function transform3dTest() {
var mqProp = "transform-3d",
// Because the `translate3d` test below throws false positives in Android:
ret = mediaTest("(-" + vendors.join("-" + mqProp + "),(-") + "-" + mqProp + "),(" + mqProp + ")"),
el, transforms, t;

if (ret) {
return !!ret;
}

el = document.createElement("div");
transforms = {
// We’re omitting Opera for the time being; MS uses unprefixed.
"MozTransform": "-moz-transform",
"transform": "transform"
};

fakeBody.append(el);

for (t in transforms) {
if (el.style[ t ] !== undefined) {
el.style[ t ] = "translate3d( 100px, 1px, 1px )";
ret = window.getComputedStyle(el).getPropertyValue(transforms[ t ]);
}
}
return (!!ret && ret !== "none");
}

//判定当前浏览器是否支持position:fiexed
new function() {
var test = document.createElement('div'),
control = test.cloneNode(false),
fake = false,
root = document.body || (function() {
fake = true;
return document.documentElement.appendChild(document.createElement('body'));
}());

var oldCssText = root.style.cssText;
root.style.cssText = 'padding:0;margin:0';
test.style.cssText = 'position:fixed;top:42px';
root.appendChild(test);
root.appendChild(control);

QApp.support.positionfixed = test.offsetTop !== control.offsetTop;

root.removeChild(test);
root.removeChild(control);
root.style.cssText = oldCssText;

if (fake) {
document.documentElement.removeChild(root);
}
}
new function() {
var test = document.createElement('div'),
ret, fake = false,
root = document.body || (function() {
fake = true;
return document.documentElement.appendChild(document.createElement('body'));
}());

if (typeof document.body.scrollIntoViewIfNeeded === 'function') {

var oldCssText = root.style.cssText,
testScrollTop = 20,
originalScrollTop = window.pageYOffset;

root.appendChild(test);

test.style.cssText = 'position:fixed;top:0px;height:10px;';

root.style.height = "3000px";

/* avoided hoisting for clarity */
var testScroll = function() {
if (ret === undefined) {
test.scrollIntoViewIfNeeded();
if (window.pageYOffset === testScrollTop) {
ret = true;
} else {
ret = false;
}
}
window.removeEventListener('scroll', testScroll, false);
}

window.addEventListener('scroll', testScrollTop, false);
window.setTimeout(testScroll, 20); // ios 4 does'nt publish the scroll event on scrollto
window.scrollTo(0, testScrollTop);
testScroll();

root.removeChild(test);
root.style.cssText = oldCssText;
window.scrollTo(0, originalScrollTop);

} else {
ret = QApp.support.positionfixed; // firefox and IE doesnt have document.body.scrollIntoViewIfNeeded, so we test with the original modernizr test
}

if (fake) {
document.documentElement.removeChild(root);
}

QApp.support.iospositionfixed = ret;
}
</ff4>

来自:https://www.cnblogs.com/rubylouvre/archive/2009/10/14/1583362.html

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/8543

window.open被拦截的解决方法总汇

介绍window.open方法被浏览器拦截的处理方式。在 Chrome 的安全机制里,非用户直接触发的 window.open 方法,是会被拦截的,这是由于浏览器为了维护用户安全和体验,下面采用几种变通方法解决:表单提交的方式、onclick事件、延迟打开等

常用浏览器内核及分类

浏览器是网页运行的平台,常用的浏览器有 IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。我们平时称为五大浏览器。 浏览器内核分成两部分:渲染引擎和 JS 引擎

浏览器访问一个网站所经历的步骤

浏览器访问网站的步骤:Chrome搜索自身的DNS缓存、读取本地HOST文件、浏览器发起一个DNS的一个系统调用、浏览器获得域名对应的IP地址后,发起HTTP三次握手、TCP/IP连接建立起来、服务器端接受到了这个请求、浏览器根据拿到的资源对页面进行渲染

程序员眼中的浏览器是什么样的?IE:有本事你卸了我啊

主流浏览器之争从上个世纪开就开始,已经持续了很长的时间。人们都在笑话IE,纷纷转向其它浏览器。今天,我向大家分享一下针对IE的搞笑图片,只是逗乐而已,喝杯咖啡,坐下来慢慢享受吧。

浏览器工作原理学习笔记

DOM:渲染引擎解析 HTML 文档,构建 DOM Tree,Computed Style:解析对应的 CSS 样式信息,生成 document.styleSheets,计算 DOM 样式,布局(reflow/layout):计算布局信息,生成布局树 LayoutTree

浏览器引入gRPC的现况

gRPC 1.0于2016年8月发布,现已发展成为应用通信的首选技术解决方案之一。它已被全球的初创公司、企业公司和开源项目采用。它对多语言环境的支持、关注性能、类型安全性和开发者生产力已经改变了开发者设计架构的方式。

深入浏览器事件循环的本质

浏览器的事件循环,前端再熟悉不过了,每天都会接触的东西。但我以前一直都是死记硬背:事件任务队列分为macrotask和microtask,浏览器先从macrotask取出一个任务执行,再执行microtask内的所有任务,接着又去macrotask取出一个任务执行

如何处理浏览器的断网情况?

好的断网处理会让人很舒适:lol的断线重连,王者荣耀的断线重连 可以确保游戏的继续进行,坏的断网处理甚至不处理会出bug:比如我手上的项目就出了个bug 业务人员表示非常苦恼

浏览器将标签转成 DOM 的过程

进入主话题之前,先罗列一下浏览器的主要构成:用户界面- 包括地址栏、后退/前进按钮、书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分

如何判断浏览器是否支持css3?

css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广