(教學第23篇)系統資訊 上篇
JavaScript是駭客的工具！這可不是小誌在危言聳聽，因為JavaScript程式是夾帶在網頁中，當網頁下載到瀏覽者的瀏覽器中才會開始執行，因此，瀏覽者的相關資訊是可被JavaScript程式所擷取的，一般來說，JavaScript程式的「駭」人威力並不像可執行檔（*.exe,*.com）那樣的驚人，不過，在有心人士的眼中仍然是一個非常好的「駭」人工具。Script (文稿) ，是由一群可以在網頁伺服器(Server)或客戶端(Client)瀏覽器執行的指令所組合而成，例如VBScript或JavaScript。 VBScript 與 JavaScript 都是所謂的：網頁應用程式語言，但是這些由JavaScript 或 VBScript 所完成的網頁程式並不需要透過模擬網路伺服器的機制來開啟，因為瀏覽器本身就具有執行這些網頁應用程式的能力，也正因為如此，當這些Script隨著網頁下載到瀏覽器後，便可對瀏覽者的機器系統資料加以分析。
[color=darkorange][size=5][b]瀏覽器物件[/b][/size][/color]
在目前的網路世界中有兩大瀏覽器家族，一為Microsoft(微軟)家族的『Internet Explorer』，另一為美國網景公司的『Netscape Navigator』，這兩大家族的瀏覽器，雖然都支援JavaScript程式的執行，但是支援程度都各不相同，因而造成我們設計JavaScript程式的盲點，同一支JavaScript或許在某家族的瀏覽器中可正常執行無誤，但不代表在另一家族的瀏覽器中也可以正常無誤的執行。因此，我們必須正確地獲知瀏覽者所使用的瀏覽器，並依其瀏覽器的不同，給予不同的JavaScript程式。
要正確地獲知瀏覽者所使用的瀏覽器種類與瀏覽器版本，可以利用JavaScript所提供的瀏覽器物件『navigator』，透過瀏覽器物件的屬性，我們將可以獲得許多瀏覽者的系統資訊：
[table]
[tr][td=1,1,172][p=30, 2, center][font=全真中細圓體][size=14pt][font=Courier New][size=2]屬性[/size][/font][/size][/font][/p][/td][td=1,1,288][p=30, 2, center][font=全真中細圓體][size=14pt][font=Courier New][size=2]作用[/size][/font][/size][/font][/p][/td][/tr]
[tr][td=1,1,172][p=30, 2, left][font=Courier New][color=#000000][size=2]navigator.appName[/size][/color][/font][/p][/td][td=1,1,288][p=30, 2, left][color=#000000][size=2][font=細明體]瀏覽者的瀏覽器名稱[/font][/size][/color][/p][/td][/tr]
[tr][td=1,1,172][p=30, 2, left][font=Courier New][color=#000000][size=2]navigator.appVersion[/size][/color][/font][/p][/td][td=1,1,288][p=30, 2, left][color=#000000][size=2][font=細明體]瀏覽者的瀏覽器版本與作業系統[/font][/size][/color][/p][/td][/tr]
[tr][td=1,1,172][p=30, 2, left][font=Courier New][color=#000000][size=2]navigator.userAgen[/size][/color][/font][/p][/td][td=1,1,288][p=30, 2, left][font=細明體][size=2][color=#000000]瀏覽者的瀏覽器名稱、版本與作業系統[/color][/size][/font][/p][/td][/tr]
[/table] [color=Green][size=4][b] 瀏覽器名稱[/b][/size][/color]
當我們使用瀏覽器物件『navigator』的「appName」屬性時，將可以獲知瀏覽者目前所使用的瀏覽器名稱，當瀏覽者所使用的瀏覽器為Internet Explorer（IE）時，則「appName」屬性值為「Microsoft Internet Explorer」，而瀏覽者所使用的瀏覽器為Netscape Navigator時，則「appName」屬性值為「Netscape」。
[color=Magenta][size=4][b] 實作學習：[/b][/size][/color]
當你參觀別人的網站時，常可見到網頁中寫著：「你使用的瀏覽器是…」，有沒有嚇到呢？其實，這並沒有什麼技巧性，只是單純地取得『navigator』的「appName」屬性值，並利用document物件的write()方法將這個「appName」屬性值輸出到網頁中而已！[code]<HTML>
<HEAD>
<TITLE>瀏覽器名稱</TITLE>
</HEAD>
<BODY>
<SCRIPT Language="JavaScript">
mybrowser=navigator.appName
document.write("你使用的瀏覽器是"+mybrowser)
</SCRIPT>
</BODY>
</HTML>[/code][attach]698[/attach] [color=Green][size=4][b]瀏覽器版本[/b][/size][/color]
「駭」到瀏覽者所使用的瀏覽器名稱不過癮，我們再來駭瀏覽者所使用的瀏覽器版本。使用瀏覽器物件『navigator』的「appVersion」屬性時，將可以獲知瀏覽者目前所使用的瀏覽器版本，與瀏覽者目前所使用的作業系統。
[b][color=Magenta][size=4] 實作學習：[/size][/color][/b]
使用瀏覽器物件『navigator』的「appVersion」屬性，獲知瀏覽者目前所使用的瀏覽器版本，與瀏覽者目前所使用的作業系統。[code]<HTML>
<HEAD>
<TITLE>瀏覽器版本</TITLE>
</HEAD>
<BODY>
<SCRIPT Language="JavaScript">
mybrowser=navigator.appVersion
document.write("你使用的瀏覽器版本與作業系統是"+mybrowser)
</SCRIPT>
</BODY>
</HTML>[/code][attach]699[/attach]
[color=Magenta][size=4][b]實作學習：[/b][/size][/color]
「瀏覽本站最佳瀏覽器為IE5.0」這句話，你也常在人家的網頁中看到吧！所以，在偵測瀏覽者瀏覽器的同時，還可以更進一步的建議瀏覽者更換它的瀏覽器來符合我們網站中的最佳瀏覽環境。[code]<HTML>
<HEAD>
<TITLE>最佳瀏覽器版本</TITLE>
</HEAD>
<BODY>
<SCRIPT Language="JavaScript">
myName=navigator.appName
myVer=parseInt(navigator.appVersion)
if (myName=="Netscape" && myVer==3)
{msg="Netscape3"}
else if (myName=="Netscape" && myVer==4)
{msg="Netscape4"}
else if (myName=="Netscape" && myVer==5)
{msg="Netscape5"}
else if (myName=="Microsoft Internet Explorer" && myVer==3)
{msg="IE3"}
else if (myName=="Microsoft Internet Explorer" && myVer==4)
{msg="IE4"}
else if (myName=="Microsoft Internet Explorer" && myVer==5)
{msg="IE5"}
alert("你所使用的瀏覽器是"+msg+"\n瀏覽本站最佳瀏覽器為IE5")
</SCRIPT>
</BODY>
</HTML>[/code][list]
[*]原始碼第7行，設定變數myName的內容為瀏覽器名稱。
[*]原始碼第8行，設定變數myName的內容為瀏覽器版本號碼，並利用parseInt()函式擷取navigator.appVersion屬性值內的整數值。
[*]原始碼第9至20行，利用if判斷敘述組合瀏覽器的名稱及版本
[/list]
[attach]700[/attach] [color=DarkOrange][size=5]不同的瀏覽器，不同的網頁[/size][/color]
我們之前說過：同一支JavaScript或許在某家族的瀏覽器中可正常執行無誤，但不代表在另一家族的瀏覽器中也可以正常無誤的執行，更重要的是：同樣的網頁排版樣式，在不同的瀏覽器中，也可能會有走樣的情況發生！因此，我們可以利用瀏覽器的偵測，將瀏覽者引導至其瀏覽器適合觀賞的網頁中：
[attach]701[/attach][code]<HTML>
<HEAD>
<TITLE>不同的瀏覽器，不同的網頁</TITLE>
</HEAD>
<BODY>
<SCRIPT Language="JavaScript">
function test()
{
myName=navigator.appName
if (myName=="Netscape")
{window.location="9-4-1.htm"}
else if (myName=="Microsoft Internet Explorer")
{window.location="9-4-2.htm"}
}
</SCRIPT>
<form>
<input type="button" value="不同的瀏覽器，不同的網頁" OnClick="test()">
</form>
</BODY>
</HTML>[/code][list]
[*]當我們按下在網頁中的「不同的瀏覽器，不同的網頁」按鈕時，（程式碼第17行），利用OnLoad事件來呼叫瀏覽器名稱test()函式(程式碼第7行)。
[*]原始碼第9行，設定變數myName的內容為瀏覽器名稱。
[*]當瀏覽者的瀏覽器名稱為「Netscape」時，利用window.location方法將瀏覽器轉向至9-4-1.htm（程式碼第10、11行）。
[*]當瀏覽者的瀏覽器名稱為「Microsoft Internet Explorer」時，利用window.location方法將瀏覽器轉向至9-4-2.htm（程式碼第12、13行）。
[/list]
如果你希望在瀏覽者一進入你的首頁（通常為index.htm）後，就讓我們的判別程式立刻執行而將瀏覽器轉向到它專屬的網頁去，則我們可以將範例9-4.htm改寫，直接在<BODY>標籤內使用OnLoad事件，如下：[code]<HTML>
<HEAD>
<TITLE>不同的瀏覽器，不同的網頁</TITLE>
</HEAD>
<BODY OnLoad="test()">
<SCRIPT Language="JavaScript">
function test()
{
myName=navigator.appName
if (myName=="Netscape")
{window.location="9-4-1.htm"}
else if (myName=="Microsoft Internet Explorer")
{window.location="9-4-2.htm"}
}
</SCRIPT>
</BODY>
</HTML>[/code][color=Magenta][size=4][b] 進階研究：[/b][/size][/color]
在首頁中判別瀏覽者的瀏覽器名稱後，將瀏覽器轉向到它專屬的網頁去，這樣的做法並不嚴謹，一旦使用者回到首頁時，那我們就得再次進行判別的動作，然後又做一次轉向的動作！最好的解決方法就是利用框架把它框起來。[code]<HTML>
<HEAD>
<TITLE>不同的瀏覽器，不同的網頁</TITLE>
</HEAD>
<SCRIPT Language="JavaScript">
myName=navigator.appName
if (myName=="Netscape")
{
document.write("<frameset rows='100%,*' frameborder=no border=0>")
document.write("<frame src='9-4-1.htm'>")
}
else if (myName=="Microsoft Internet Explorer")
{
document.write("<frameset rows='100%,*' frameborder=no border=0>")
document.write("<frame src='9-4-2.htm'>")
}
</SCRIPT>
<BODY>
</BODY>
</HTML>[/code][list]
[*]原始碼第6行，設定變數myName的內容為瀏覽器名稱。
[*]當瀏覽者的瀏覽器名稱為「Netscape」時，我們在瀏覽器視窗內建立一個「單框架」，而框架中的內容則為9-1-1.htm ，Netscape瀏覽器專屬網頁（程式碼第8至12行）。
[*]當瀏覽者的瀏覽器名稱為「Microsoft Internet Explorer」時，我們在瀏覽器視窗內建立一個「單框架」，而框架中的內容則為9-1-2.htm，Internet Explorer瀏覽器專屬網頁（程式碼第14至18行）。
[attach]702[/attach][*]瀏覽者一進入首頁後，就讓我們的判別程式立刻執行而建立單框架視窗，框架中的內容將成為特定瀏覽器專用的，此時你可以發現瀏覽器工具列並沒有「上一頁」的功能！（如上圖）
[/list]
頁:
[1]