2019年6月5日 星期三

(22)系統資訊 上篇

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

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

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



瀏覽器名稱
當我們使用瀏覽器物件『navigator』的「appName」屬性時，將可以獲知瀏覽者目前所使用的瀏覽器名稱，當瀏覽者所使用的瀏覽器為Internet Explorer（IE）時，則「appName」屬性值為「Microsoft Internet Explorer」。
實作學習：
當你參觀別人的網站時，常可見到網頁中寫著：「你使用的瀏覽器是…」，有沒有嚇到呢？其實，這並沒有什麼技巧性，只是單純地取得『navigator』的「appName」屬性值，並利用document物件的write()方法將這個「appName」屬性值輸出到網頁中而已！
  1. <HTML>
  2. <HEAD>
  3. <TITLE>瀏覽器名稱</TITLE>
  4. </HEAD>
  5. <BODY>
  6. <SCRIPT Language="JavaScript">
  7. mybrowser=navigator.appName
  8. document.write("你使用的瀏覽器是"+mybrowser)
  9. </SCRIPT>
  10. </BODY>
  11. </HTML>


瀏覽器版本
「駭」到瀏覽者所使用的瀏覽器名稱不過癮，我們再來駭瀏覽者所使用的瀏覽器版本。使用瀏覽器物件『navigator』的「appVersion」屬性時，將可以獲知瀏覽者目前所使用的瀏覽器版本，與瀏覽者目前所使用的作業系統。
實作學習：
使用瀏覽器物件『navigator』的「appVersion」屬性，獲知瀏覽者目前所使用的瀏覽器版本，與瀏覽者目前所使用的作業系統。
  1. <HTML>
  2. <HEAD>
  3. <TITLE>瀏覽器版本</TITLE>
  4. </HEAD>
  5. <BODY>
  6. <SCRIPT Language="JavaScript">
  7. mybrowser=navigator.appVersion
  8. document.write("你使用的瀏覽器版本與作業系統是"+mybrowser)
  9. </SCRIPT>
  10. </BODY>
  11. </HTML>
實作學習：
「瀏覽本站最佳瀏覽器為xxx」這句話，你也常在人家的網頁中看到吧！所以，在偵測瀏覽者瀏覽器的同時，還可以更進一步的建議瀏覽者更換它的瀏覽器來符合我們網站中的最佳瀏覽環境。
  1. <HTML>
  2. <HEAD>
  3. <TITLE>最佳瀏覽器版本</TITLE>
  4. </HEAD>
  5. <BODY>
  6. <SCRIPT Language="JavaScript">
  7. myName=navigator.appName
  8. myVer=parseInt(navigator.appVersion)
  9. if (myName=="Netscape" && myVer==3) 
  10. {msg="Netscape3"}
  11. else if (myName=="Netscape" && myVer==4) 
  12. {msg="Netscape4"}
  13. else if (myName=="Netscape" && myVer==5) 
  14. {msg="Netscape5"}
  15. else if (myName=="Microsoft Internet Explorer" && myVer==3) 
  16. {msg="IE3"}
  17. else if (myName=="Microsoft Internet Explorer" && myVer==4) 
  18. {msg="IE4"}
  19. else if (myName=="Microsoft Internet Explorer" && myVer==5) 
  20. {msg="IE5"}
  21. alert("你所使用的瀏覽器是"+msg+"\n瀏覽本站最佳瀏覽器為IE5")
  22. </SCRIPT>
  23. </BODY>
  24. </HTML>
  • 原始碼第7行，設定變數myName的內容為瀏覽器名稱。
  • 原始碼第8行，設定變數myName的內容為瀏覽器版本號碼，並利用parseInt()函式擷取navigator.appVersion屬性值內的整數值。
  • 原始碼第9至20行，利用if判斷敘述組合瀏覽器的名稱及版本


不同的瀏覽器，不同的網頁
我們之前說過：同一支JavaScript或許在某家族的瀏覽器中可正常執行無誤，但不代表在另一家族的瀏覽器中也可以正常無誤的執行，更重要的是：同樣的網頁排版樣式，在不同的瀏覽器中，也可能會有走樣的情況發生！因此，我們可以利用瀏覽器的偵測，將瀏覽者引導至其瀏覽器適合觀賞的網頁中：
  1. <HTML>
  2. <HEAD>
  3. <TITLE>不同的瀏覽器，不同的網頁</TITLE>
  4. </HEAD>
  5. <BODY>
  6. <SCRIPT Language="JavaScript">
  7. function test()
  8. {
  9. myName=navigator.appName
  10. if (myName=="Netscape") 
  11. {window.location="9-4-1.htm"}
  12. else if (myName=="Microsoft Internet Explorer") 
  13. {window.location="9-4-2.htm"}
  14. }
  15. </SCRIPT>
  16. <form>
  17. <input type="button" value="不同的瀏覽器，不同的網頁" OnClick="test()">
  18. </form>
  19. </BODY>
  20. </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）後，就讓我們的判別程式立刻執行而將瀏覽器轉向到它專屬的網頁去，則我們可以將範例改寫，直接在<BODY>標籤內使用OnLoad事件，如下：
  1. <HTML>
  2. <HEAD>
  3. <TITLE>不同的瀏覽器，不同的網頁</TITLE>
  4. </HEAD>
  5. <BODY OnLoad="test()">
  6. <SCRIPT Language="JavaScript">
  7. function test()
  8. {
  9. myName=navigator.appName
  10. if (myName=="Netscape") 
  11. {window.location="9-4-1.htm"}
  12. else if (myName=="Microsoft Internet Explorer") 
  13. {window.location="9-4-2.htm"}
  14. }
  15. </SCRIPT>
  16. </BODY>
  17. </HTML>
進階研究：
在首頁中判別瀏覽者的瀏覽器名稱後，將瀏覽器轉向到它專屬的網頁去，這樣的做法並不嚴謹，一旦使用者回到首頁時，那我們就得再次進行判別的動作，然後又做一次轉向的動作！最好的解決方法就是利用框架把它框起來。
  1. <HTML>
  2. <HEAD>
  3. <TITLE>不同的瀏覽器，不同的網頁</TITLE>
  4. </HEAD>
  5. <SCRIPT Language="JavaScript">
  6. myName=navigator.appName

  8. if (myName=="Netscape") 
  9. {
  10. document.write("<frameset rows='100%,*' frameborder=no border=0>")
  11. document.write("<frame src='9-4-1.htm'>")
  12. }

  14. else if (myName=="Microsoft Internet Explorer") 
  15. {
  16. document.write("<frameset rows='100%,*' frameborder=no border=0>")
  17. document.write("<frame src='9-4-2.htm'>")
  18. }

  20. </SCRIPT>
  21. <BODY>
  22. </BODY>
  23. </HTML>
  • 原始碼第6行，設定變數myName的內容為瀏覽器名稱。
  • 當瀏覽者的瀏覽器名稱為「Netscape」時，我們在瀏覽器視窗內建立一個「單框架」，而框架中的內容則為9-1-1.htm ，Netscape瀏覽器專屬網頁（程式碼第8至12行）。
  • 當瀏覽者的瀏覽器名稱為「Microsoft Internet Explorer」時，我們在瀏覽器視窗內建立一個「單框架」，而框架中的內容則為9-1-2.htm，Internet Explorer瀏覽器專屬網頁（程式碼第14至18行）。
  • 瀏覽者一進入首頁後，就讓我們的判別程式立刻執行而建立單框架視窗，框架中的內容將成為特定瀏覽器專用的，此時你可以發現瀏覽器工具列並沒有「上一頁」的功能！

於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)
  • OpenOffice.org 自由學習趣：Part2Calc4_圖表
    版權宣告 【數位書香網站】之所有著作、視聽內容及資料以及網站畫面資料之安排，其著作權、專利權、商標、營業秘密及其他智慧財產權，均為【昱得資訊工作室】之合法權利人所有，除事先經【昱得資訊工作室】或其權利人之合法授權，任何人皆不得擅...
  • DW_PHP_AJAX_CH2 PHP語言入門_(2)變數、符號與陣列_陣列
    [陣列]   什麼叫陣列（Array）？陣列就是一個集合變數, 陣列就如變數一般, 可用來儲存資料, 一般的變數只能存放一筆資料, 而陣列則可以存放多筆資料, 簡言之, 陣列就一群資料型態相同的變數集合。 陣列是一群變數的集合, 不妨將陣列想像成一間旅館, 旅館內會有很多房...
  • DW_PHP_AJAX_CH3 表單的設計與規劃_(4)使用Spry元件驗證欄位_下
    [驗證Email格式] 希望使用者留下聯絡的電子信箱, 卻擔心使用者填寫了錯誤格式的郵件地址, 別擔心, 「Spry驗證文字欄位」也具由電子信箱、身分證字號…等具有特定格式的資料驗證功能。 1. 點選「信箱」文字欄位, 然後按下工具列【Spry】頁籤中的「Spry驗證文...
  • PowerPoint快速鍵
    若要這麼做 請按 從頭開始簡報 F5 從目前的投影片開始簡報 Shift+F5 顯示 簡報者檢視畫面 Alt+F5 或 Alt+S，B 在簡報中，以查看快速鍵的清單，請按下 F1。使用方向鍵在  說明投影片放映  對話方...
  • 版權宣告
    【數位書香網站】之所有著作、視聽內容及資料以及網站畫面資料之安排，其著作權、專利權、商標、營業秘密及其他智慧財產權，均為【昱得資訊工作室】之合法權利人所有，除事先經【昱得資訊工作室】或其權利人之合法授權，任何人皆不得擅自以任何形式複製、改作、編輯、散布、傳輸或其他目的加以使用，否...
  • 銀髮族的快樂電腦時間：CH4 EXCEL 圖表製作
    版權宣告 【數位書香網站】之所有著作、視聽內容及資料以及網站畫面資料之安排，其著作權、專利權、商標、營業秘密及其他智慧財產權，均為【昱得資訊工作室】之合法權利人所有，除事先經【昱得資訊工作室】或其權利人之合法授權，任何人皆不得擅自以任何形式複製、改作、...
  • (04)JavaScript 條件判斷敘述if
    條件判斷敘述if if判斷敘述是我們最常用來讓程式轉彎的判斷敘述，它的通用格式是： If  (條件式)  {      程式敘述 } 它的意義是：如果『條件式』成立（評估值為True），就執行大括號『｛｝』之間的程式敘述，不然的話就跳過大括號『｛｝』之間的...