小誌

　暱稱: 小誌
　頭銜: 曾經也是水電工

帖子: 1190
主題: 394
精華: 113
積分: 1747
點名: 1
作業系統: Vista
軟體版本: Office 2003
閱讀權限: 200
性別: 男
來自: 台灣
註冊時間: 2010-5-1
最後登錄: 2024-11-25

2021牛年全勤獎章好學求知勳章熱烈參與勳章 2017 雞年全勤獎章 2018 狗年全勤獎章 2019 豬年全勤獎章 2020鼠年全勤獎章

1^# 跳轉到 » 正序看帖

打印

字體大小: tT

發表於 2010-5-19 00:25 | 只看該作者

[教學] (教學第23篇)系統資訊上篇

JavaScript是駭客的工具！這可不是小誌在危言聳聽，因為JavaScript程式是夾帶在網頁中，當網頁下載到瀏覽者的瀏覽器中才會開始執行，因此，瀏覽者的相關資訊是可被JavaScript程式所擷取的，一般來說，JavaScript程式的「駭」人威力並不像可執行檔（*.exe,*.com）那樣的驚人，不過，在有心人士的眼中仍然是一個非常好的「駭」人工具。

Script (文稿) ，是由一群可以在網頁伺服器(Server)或客戶端(Client)瀏覽器執行的指令所組合而成，例如VBScript或JavaScript。 VBScript 與 JavaScript 都是所謂的：網頁應用程式語言，但是這些由JavaScript 或 VBScript 所完成的網頁程式並不需要透過模擬網路伺服器的機制來開啟，因為瀏覽器本身就具有執行這些網頁應用程式的能力，也正因為如此，當這些Script隨著網頁下載到瀏覽器後，便可對瀏覽者的機器系統資料加以分析。

瀏覽器物件
在目前的網路世界中有兩大瀏覽器家族，一為Microsoft(微軟)家族的『Internet Explorer』，另一為美國網景公司的『Netscape Navigator』，這兩大家族的瀏覽器，雖然都支援JavaScript程式的執行，但是支援程度都各不相同，因而造成我們設計JavaScript程式的盲點，同一支JavaScript或許在某家族的瀏覽器中可正常執行無誤，但不代表在另一家族的瀏覽器中也可以正常無誤的執行。因此，我們必須正確地獲知瀏覽者所使用的瀏覽器，並依其瀏覽器的不同，給予不同的JavaScript程式。

要正確地獲知瀏覽者所使用的瀏覽器種類與瀏覽器版本，可以利用JavaScript所提供的瀏覽器物件『navigator』，透過瀏覽器物件的屬性，我們將可以獲得許多瀏覽者的系統資訊：

屬性	作用
navigator.appName	瀏覽者的瀏覽器名稱
navigator.appVersion	瀏覽者的瀏覽器版本與作業系統
navigator.userAgen	瀏覽者的瀏覽器名稱、版本與作業系統

樓主熱帖

心安，平安
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

小誌

　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員 Rank: 9 Rank: 9 Rank: 9

帖子: 1190
主題: 394
精華: 113
積分: 1747
點名: 1
作業系統: Vista
軟體版本: Office 2003
閱讀權限: 200
性別: 男
來自: 台灣
註冊時間: 2010-5-1
最後登錄: 2024-11-25

2021牛年全勤獎章好學求知勳章熱烈參與勳章 2017 雞年全勤獎章 2018 狗年全勤獎章 2019 豬年全勤獎章 2020鼠年全勤獎章

4^#

發表於 2010-5-19 00:36 | 只看該作者

不同的瀏覽器，不同的網頁
我們之前說過：同一支JavaScript或許在某家族的瀏覽器中可正常執行無誤，但不代表在另一家族的瀏覽器中也可以正常無誤的執行，更重要的是：同樣的網頁排版樣式，在不同的瀏覽器中，也可能會有走樣的情況發生！因此，我們可以利用瀏覽器的偵測，將瀏覽者引導至其瀏覽器適合觀賞的網頁中：

<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>

複製代碼

當我們按下在網頁中的「不同的瀏覽器，不同的網頁」按鈕時，（程式碼第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行）。

如果你希望在瀏覽者一進入你的首頁（通常為index.htm）後，就讓我們的判別程式立刻執行而將瀏覽器轉向到它專屬的網頁去，則我們可以將範例9-4.htm改寫，直接在<BODY>標籤內使用OnLoad事件，如下：

<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>

複製代碼

進階研究：
在首頁中判別瀏覽者的瀏覽器名稱後，將瀏覽器轉向到它專屬的網頁去，這樣的做法並不嚴謹，一旦使用者回到首頁時，那我們就得再次進行判別的動作，然後又做一次轉向的動作！最好的解決方法就是利用框架把它框起來。

<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>

複製代碼

原始碼第6行，設定變數myName的內容為瀏覽器名稱。
當瀏覽者的瀏覽器名稱為「Netscape」時，我們在瀏覽器視窗內建立一個「單框架」，而框架中的內容則為9-1-1.htm ，Netscape瀏覽器專屬網頁（程式碼第8至12行）。
當瀏覽者的瀏覽器名稱為「Microsoft Internet Explorer」時，我們在瀏覽器視窗內建立一個「單框架」，而框架中的內容則為9-1-2.htm，Internet Explorer瀏覽器專屬網頁（程式碼第14至18行）。

下載 (17.9 KB)

2010-5-19 00:35
瀏覽者一進入首頁後，就讓我們的判別程式立刻執行而建立單框架視窗，框架中的內容將成為特定瀏覽器專用的，此時你可以發現瀏覽器工具列並沒有「上一頁」的功能！（如上圖）

心安，平安
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

小誌

　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員 Rank: 9 Rank: 9 Rank: 9

帖子: 1190
主題: 394
精華: 113
積分: 1747
點名: 1
作業系統: Vista
軟體版本: Office 2003
閱讀權限: 200
性別: 男
來自: 台灣
註冊時間: 2010-5-1
最後登錄: 2024-11-25

2021牛年全勤獎章好學求知勳章熱烈參與勳章 2017 雞年全勤獎章 2018 狗年全勤獎章 2019 豬年全勤獎章 2020鼠年全勤獎章

3^#

發表於 2010-5-19 00:28 | 只看該作者

瀏覽器版本
「駭」到瀏覽者所使用的瀏覽器名稱不過癮，我們再來駭瀏覽者所使用的瀏覽器版本。使用瀏覽器物件『navigator』的「appVersion」屬性時，將可以獲知瀏覽者目前所使用的瀏覽器版本，與瀏覽者目前所使用的作業系統。

實作學習：
使用瀏覽器物件『navigator』的「appVersion」屬性，獲知瀏覽者目前所使用的瀏覽器版本，與瀏覽者目前所使用的作業系統。

<HTML>
<HEAD>
<TITLE>瀏覽器版本</TITLE>
</HEAD>
<BODY>
<SCRIPT Language="JavaScript">
mybrowser=navigator.appVersion
document.write("你使用的瀏覽器版本與作業系統是"+mybrowser)
</SCRIPT>
</BODY>
</HTML>

複製代碼

實作學習：
「瀏覽本站最佳瀏覽器為IE5.0」這句話，你也常在人家的網頁中看到吧！所以，在偵測瀏覽者瀏覽器的同時，還可以更進一步的建議瀏覽者更換它的瀏覽器來符合我們網站中的最佳瀏覽環境。

<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>

複製代碼

原始碼第7行，設定變數myName的內容為瀏覽器名稱。
原始碼第8行，設定變數myName的內容為瀏覽器版本號碼，並利用parseInt()函式擷取navigator.appVersion屬性值內的整數值。
原始碼第9至20行，利用if判斷敘述組合瀏覽器的名稱及版本

心安，平安
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

小誌

　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員 Rank: 9 Rank: 9 Rank: 9

帖子: 1190
主題: 394
精華: 113
積分: 1747
點名: 1
作業系統: Vista
軟體版本: Office 2003
閱讀權限: 200
性別: 男
來自: 台灣
註冊時間: 2010-5-1
最後登錄: 2024-11-25

2021牛年全勤獎章好學求知勳章熱烈參與勳章 2017 雞年全勤獎章 2018 狗年全勤獎章 2019 豬年全勤獎章 2020鼠年全勤獎章

2^#

發表於 2010-5-19 00:27 | 只看該作者

瀏覽器名稱
當我們使用瀏覽器物件『navigator』的「appName」屬性時，將可以獲知瀏覽者目前所使用的瀏覽器名稱，當瀏覽者所使用的瀏覽器為Internet Explorer（IE）時，則「appName」屬性值為「Microsoft Internet Explorer」，而瀏覽者所使用的瀏覽器為Netscape Navigator時，則「appName」屬性值為「Netscape」。

實作學習：
當你參觀別人的網站時，常可見到網頁中寫著：「你使用的瀏覽器是…」，有沒有嚇到呢？其實，這並沒有什麼技巧性，只是單純地取得『navigator』的「appName」屬性值，並利用document物件的write()方法將這個「appName」屬性值輸出到網頁中而已！

<HTML>
<HEAD>
<TITLE>瀏覽器名稱</TITLE>
</HEAD>
<BODY>
<SCRIPT Language="JavaScript">
mybrowser=navigator.appName
document.write("你使用的瀏覽器是"+mybrowser)
</SCRIPT>
</BODY>
</HTML>

複製代碼

心安，平安
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP