(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享


Posted in Javascript onJanuary 24, 2013

跨浏览器基础事件

//跨浏览器添加事件 
function addEvent(obj, type, fn) { 
if (obj.addEventListener) { 
obj.addEventListener(type, fn, false); 
} else if (obj.attachEvent) { 
obj.attachEvent('on' + type, function () { 
fn.call(obj); 
}); 
} 
} 
//跨浏览器基础事件 
function removeEvent(obj, type, fn) { 
if (obj.removeEventListener) { 
obj.removeEventListener(type, fn, false); 
} else if (obj.detachEvent) { 
obj.detachEvent('on' + type, fn); 
} 
} 
//跨浏览器阻止默认行为 
function preDef(evt) { 
var e = evt || window.event; 
if (e.preventDefault) { 
e.preventDefault(); 
} else { 
e.returnValue = false; 
} 
} 
//跨浏览器获取目标对象 
function getTarget(evt) { 
if (evt.target) { //W3C 
return evt.target; 
} else if (window.event.srcElement) { //IE 
return window.event.srcElement; 
} 
} 
//跨浏览器获取字符编码 
function getCharCode(evt) { 
var e = evt || window.event; 
if (typeof e.charCode == 'number') { 
return e.charCode; 
} else { 
return e.keyCode; 
} 
}

浏览器检测
var client = function(){ 
//rendering engines 
var engine = { 
ie: 0, 
gecko: 0, 
webkit: 0, 
khtml: 0, 
opera: 0, 
//complete version 
ver: null 
}; 
//browsers 
var browser = { 
//browsers 
ie: 0, 
firefox: 0, 
safari: 0, 
konq: 0, 
opera: 0, 
chrome: 0, 
//specific version 
ver: null 
}; 
//platform/device/OS 
var system = { 
win: false, 
mac: false, 
x11: false, 
//mobile devices 
iphone: false, 
ipod: false, 
ipad: false, 
ios: false, 
android: false, 
nokiaN: false, 
winMobile: false, 
//game systems 
wii: false, 
ps: false 
}; 
//detect rendering engines/browsers 
var ua = navigator.userAgent; 
if (window.opera){ 
engine.ver = browser.ver = window.opera.version(); 
engine.opera = browser.opera = parseFloat(engine.ver); 
} else if (/AppleWebKit\/(\S+)/.test(ua)){ 
engine.ver = RegExp["$1"]; 
engine.webkit = parseFloat(engine.ver); 
//figure out if it's Chrome or Safari 
if (/Chrome\/(\S+)/.test(ua)){ 
browser.ver = RegExp["$1"]; 
browser.chrome = parseFloat(browser.ver); 
} else if (/Version\/(\S+)/.test(ua)){ 
browser.ver = RegExp["$1"]; 
browser.safari = parseFloat(browser.ver); 
} else { 
//approximate version 
var safariVersion = 1; 
if (engine.webkit < 100){ 
safariVersion = 1; 
} else if (engine.webkit < 312){ 
safariVersion = 1.2; 
} else if (engine.webkit < 412){ 
safariVersion = 1.3; 
} else { 
safariVersion = 2; 
} 
browser.safari = browser.ver = safariVersion; 
} 
} else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){ 
engine.ver = browser.ver = RegExp["$1"]; 
engine.khtml = browser.konq = parseFloat(engine.ver); 
} else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){ 
engine.ver = RegExp["$1"]; 
engine.gecko = parseFloat(engine.ver); 
//determine if it's Firefox 
if (/Firefox\/(\S+)/.test(ua)){ 
browser.ver = RegExp["$1"]; 
browser.firefox = parseFloat(browser.ver); 
} 
} else if (/MSIE ([^;]+)/.test(ua)){ 
engine.ver = browser.ver = RegExp["$1"]; 
engine.ie = browser.ie = parseFloat(engine.ver); 
} 
//detect browsers 
browser.ie = engine.ie; 
browser.opera = engine.opera; 
//detect platform 
var p = navigator.platform; 
system.win = p.indexOf("Win") == 0; 
system.mac = p.indexOf("Mac") == 0; 
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); 
//detect windows operating systems 
if (system.win){ 
if (/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)){ 
if (RegExp["$1"] == "NT"){ 
switch(RegExp["$2"]){ 
case "5.0": 
system.win = "2000"; 
break; 
case "5.1": 
system.win = "XP"; 
break; 
case "6.0": 
system.win = "Vista"; 
break; 
case "6.1": 
system.win = "7"; 
break; 
default: 
system.win = "NT"; 
break; 
} 
} else if (RegExp["$1"] == "9x"){ 
system.win = "ME"; 
} else { 
system.win = RegExp["$1"]; 
} 
} 
} 
//mobile devices 
system.iphone = ua.indexOf("iPhone") > -1; 
system.ipod = ua.indexOf("iPod") > -1; 
system.ipad = ua.indexOf("iPad") > -1; 
system.nokiaN = ua.indexOf("NokiaN") > -1; 
//windows mobile 
if (system.win == "CE"){ 
system.winMobile = system.win; 
} else if (system.win == "Ph"){ 
if(/Windows Phone OS (\d+.\d+)/.test(ua)){; 
system.win = "Phone"; 
system.winMobile = parseFloat(RegExp["$1"]); 
} 
} 
//determine iOS version 
if (system.mac && ua.indexOf("Mobile") > -1){ 
if (/CPU (?:iPhone )?OS (\d+_\d+)/.test(ua)){ 
system.ios = parseFloat(RegExp.$1.replace("_", ".")); 
} else { 
system.ios = 2; //can't really detect - so guess 
} 
} 
//determine Android version 
if (/Android (\d+\.\d+)/.test(ua)){ 
system.android = parseFloat(RegExp.$1); 
} 
//gaming systems 
system.wii = ua.indexOf("Wii") > -1; 
system.ps = /playstation/i.test(ua); 
//return it 
return { 
engine: engine, 
browser: browser, 
system: system 
}; 
}();

判断浏览器的名称、版本号、操作系统
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"; 
}, 
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: "Internet 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(); 
alert(BrowserDetect.browser); //名称 
alert(BrowserDetect.version); //版本 
alert(BrowserDetect.OS) //系统
Javascript 相关文章推荐
Javascript attachEvent传递参数的办法
Dec 14 Javascript
菜鸟javascript基础资料整理2
Dec 06 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
jQuery实现图片左右滚动特效
Apr 20 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
jQuery遍历json的方法(推荐)
Jun 12 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
Aug 06 Javascript
js如何获取网页所有图片
May 12 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 #Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 #Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 #Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 #Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 #Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 #Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 #Javascript
You might like
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
PHP Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
php常用数组函数实例小结
2016/12/29 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
Javascript----文件操作
2007/01/18 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
打架检讨书500字
2014/01/29 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
课外小组活动总结
2014/08/27 职场文书
优秀教师推荐材料
2014/12/16 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python