寫到這裡，讓我回想起在N年前我也曾經寫過如何利用JavaScript來判斷使用者的瀏灠器??
1. [JavaScript] 如何抓取瀏灠器的版本 (How to auto select browser version by JavaScript) Part I??
2. [JavaScript] 如何抓取瀏灠器的版本 (How to auto select browser version by JavaScript) Part II??
等到自己學了jQuery之後，發現當年寫的JavaScript實在是一個蠢到不行的設計方式。
就瀏灠器的底層kernel而言，就主要分成三個陣營：Microsoft Internet Explorer、Netscape Navigator和Opera。
MSIE的使用者最多，佔了全部使用者的80%以上；但偏偏MSIE是最不遵循W3C規範的瀏灠器，相信許多網頁程式設計師都對IE恨得牙癢癢的。但是，IE上的BUG還是要解，因為這是客戶要的。
Netscape Navigator早在'99、2000年的時後，也是一款瀏灠器，跟當時微軟的IE 3.0相容性非常地差，許多HTML語法在MSIE 3.0上可以，在NN就不行....不過到後來Navigator式微，卻也衍生出以Navigator為核心的瀏灠器，如：Mozilla FireFox、Google Chrome、Apple Safari等等。
Opera是一家挪威的軟體公司Opera Software ASA所開發的瀏灠器。原本也不曉得它的底層kernel不同於MSIE和NN；直到自己寫了之前的JavaScript偵測瀏灠器程式之後，才發現它的Application Name不同於MSIE和Navigator。
在當時只要判斷Browser的appName就可以了，像許多MSIE like的瀏灠器如：MyIE、KKMAN等，去判斷這些瀏灠器的名稱，本身並沒有太大的意義，因為它們都是以IE為核心而發展出來的 (這就是自己覺得很蠢的原因....@@)。
至於為何還要判斷到MSIE的版本?? 因為之前有發生過客戶反應「MSIE 7.0可以；但到了MSIE 8.0不行」的狀況，所以還必須判斷微軟IE瀏灠器的版本。
換個角度想，假如是以「使用者常用的瀏灠器」來思考的話，是否就比較實際一些?? 非常慶興地，jQuery這個JavaScript的Framework已經幫我們解決了這個問題，可以看一下範例：
<!DOCUMENT html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.prg/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Auto detect browser by jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var objBrowserInfo = {
Language: function() {
if (window.navigator.userLanguage === undefined)
return window.navigator.language;
return window.navigator.userLanguage;
},
PlatForm: window.navigator.platform,
UserAgent: window.navigator.userAgent,
AppName: window.navigator.appName,
AppVersion: window.navigator.appVersion
};
function DBG()
{
alert("1. Your Browser Languagr: " + objBrowserInfo.Language() + "\n\n" +
"2. Your Platform: " + objBrowserInfo.PlatForm + "\n\n" +
"3. Your User Agent:\n" + objBrowserInfo.UserAgent + "\n\n" +
"4. Your Application Name: " + objBrowserInfo.AppName + "\n\n" +
"5. Your Application Version:\n" + objBrowserInfo.AppVersion + "\n");
return;
}
</script>
</head>
<body>
</body>
<script type="text/javascript">
(function($) {
$(window.document).ready(function() {
DBG();
if ($.browser.msie === true)
alert("Microsoft Internet Explorer: " + $.browser.version + " \n");
else if ($.browser.mozilla === true)
alert("Mozilla FireFox: " + $.browser.version + "\n");
else if ($.browser.chrome === true)
alert("Google Chrome: " + $.browser.version + "\n");
else if ($.browser.safari === true)
alert("Apple Safari: " + $.browser.version + "\n");
else if ($.browser.opera === true)
alert("Opera: " + $.browser.version + "\n");
else if ($.browser.webkit === true)
alert("Webkit: " + $.browser.version + "\n");
else
alert("This is Unknown browser!! \n");
return;
});
return;
})(jQuery);
</script>
</html>
連名稱都取得很直覺!! objBrowserInfo物件只為了記錄瀏灠器的一些相關資訊，然後再用DBG()函式把它們呈現出來。
沒有留言:
張貼留言