<script type="text/javascript">
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
//以下进行测试
if (Sys.ie) document.write('IE: ' + Sys.ie);
if (Sys.firefox) document.write('Firefox: ' + Sys.firefox);
if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);
if (Sys.opera) document.write('Opera: ' + Sys.opera);
if (Sys.safari) document.write('Safari: ' + Sys.safari);
</script>
其中,采用了“... ? ... : ...”这样的判断表达式来精简代码。判断条件是一条赋值语句,既完成正则表达式的匹配及结果复制,又直接作为条件判断。而随后的版本信息只需从前面的匹配结果中提取即可,这是非常高效的代码。
以上的代码都是为了打造前端框架所做的预研,并在五大浏览器上测试通过。今后,判断某种浏览器只需用if(Sys.ie)或if(Sys.firefox)等形式,而判断浏览器版本只需用if(Sys.ie == '8.0')或if(Sys.firefox == '3.0')等形式,表达起来还是非常优雅的。
前端框架项目已经启动,一切就看过程和结果了...
<SCRIPT LANGUAGE="JavaScript">
<!--
//如果IE
if (window.navigator.userAgent.indexOf("MSIE")>=1){
if ((screen.width == 800) && (screen.height == 600)){
document.write('<link rel=stylesheet type="text/css" href="/data/skins/sunschool2_0/css/ie_800_600.css">');
}
else if((screen.width == 1024) && (screen.height == 768)){
document.write('<link rel=stylesheet type="text/css" href="/data/skins/sunschool2_0/css/ie_1024_768.css">');
}
else if((screen.width == 1280) && (screen.height == 720)){
document.write('<link rel=stylesheet type="text/css" href="/data/skins/sunschool2_0/css/ie_1280_720.css">');
}
else if((screen.width == 1280) && (screen.height == 768)){
document.write('<link rel=stylesheet type="text/css" href="/data/skins/sunschool2_0/css/ie_1280_768.css">');
}
else if((screen.width == 1280) && (screen.height == 800)){
document.write('<link rel=stylesheet type="text/css" href="/data/skins/sunschool2_0/css/ie_1280_768.css">');
}
else if((screen.width == 1152) && (screen.height == 864)){
document.write('<link rel=stylesheet type="text/css" href="/data/skins/sunschool2_0/css/ie_1280_768.css">');
}
else if((screen.width == 1440) && (screen.height == 900)){
document.write('<link rel=stylesheet type="text/css" href="/data/skins/sunschool2_0/css/ie_1440_900.css">');
}
else{
document.write('<link rel=stylesheet type="text/css" href="/data/skins/sunschool2_0/css/ie_800_600.css">');
}
}
//如果浏览器为Firefox
else if (window.navigator.userAgent.indexOf("Firefox")>=1) {
if ((screen.width == 1024) && (screen.height == 768)){
document.write('<link rel=stylesheet type="text/css" href="/data/skins/sunschool2_0/css/ff_1024_768.css">');
}
else if((screen.width == 1440) && (screen.height == 900)){
document.write('<link rel=stylesheet type="text/css" href="/data/skins/sunschool2_0/css/ff_1440_900.css">');
}
else if ((screen.width == 800) && (screen.height == 600)){
document.write('<link rel=stylesheet type="text/css" href="/data/skins/sunschool2_0/css/ff_800_600.css">');
}
else if ((screen.width == 1280) && (screen.height == 768)){
document.write('<link rel=stylesheet type="text/css" href="/data/skins/sunschool2_0/css/ff_1280_768.css">');
}
else if((screen.width == 1280) && (screen.height == 720)){
document.write('<link rel=stylesheet type="text/css" href="/data/skins/sunschool2_0/css/ff_1280_720.css">');
}
else if((screen.width == 1280) && (screen.height == 800)){
document.write('<link rel=stylesheet type="text/css" href="/data/skins/sunschool2_0/css/ff_1280_800.css">');
}
else {
document.write('<link rel=stylesheet type="text/css" href="/data/skins/sunschool2_0/css/ff_1280_800.css">');
}
}
else{
//如果浏览器为其他
document.write('<link rel=stylesheet type="text/css" href="/data/skins/sunschool2_0/css/ie_1440_900.css">');
}
//-->
</SCRIPT>