Board logo

標題: [教學] (教學第29篇) Cookies 應用_瀏覽者的語言版本 [打印本頁]
作者: 小誌    時間: 2010-5-19 08:13     標題: (教學第29篇) Cookies 應用_瀏覽者的語言版本

「網路無國界，世界是一家」，你以為網路上的資訊有國別或地域的區分嗎？當然沒有！世界各國使用各種語言的網友都有可能光臨你的網站，以小誌的網站來說，有來自台灣、香港、中國大陸、甚至加拿大的網友來參觀，因此，為服務世界各國使用各種語言的網友，你可能將網站規劃成有多國語言的版本，當網友來參觀時，可自由選擇他適合的語言版本來瀏覽。
[attach]727[/attach]

當世界各國使用各種語言的網友每次來到你的網站，如果網友第一次光臨網站請人家選擇適當的語言版本來瀏覽，這是無可厚非的，但網友若是再度光臨，你又要人家選擇一次語言版本來瀏覽，這太麻煩了，好像不是很好的待客之道，所以，我們可以利用Cookies來做記錄ㄚ，當網友第一次光臨時，請他選擇適當的語言版本來瀏覽，如上圖，而他再度光臨我們網站時，不需要再選擇一次語言版本，我們會直接轉向網頁到適合它的語文版本去。
[attach]728[/attach]

在本範例程式中，我們只需要一個Cookies，它的名稱是：「Languagename」，它是用來記錄瀏覽者的語言版本，其值有下列三種可能：
作者: 小誌    時間: 2010-5-19 08:15

身份判斷的函式
當訪客進入你的首頁，我們第一件要做的事是先去確認Cookies「languagename」的值，如果Cookies「languagename」存在，則代表訪客曾經來過，接著才開始判斷Cookies「languagename」的值，如果其值為「big5」，代表訪客要瀏覽的是『中文繁體』版本的網頁，我們就直接將瀏覽位置轉向到『中文繁體』版本的網頁去；而其值若是「gb」，代表訪客要瀏覽的是『中文簡體』版本的網頁，就將瀏覽位置轉向到『中文簡體』版本的網頁去，我們把這個身份判斷的函式命名為「checklanguage()」：

checklanguage函式[身份判斷]
  1. function checklanguage()
  2. {
  3. if (getlanguage("languagename")=="big5")
  4. {
  5. window.location="big5.htm"
  6. }
  7. else if (getlanguage("languagename")=="gb")
  8. {
  9. window.location="gb.htm"
  10. }
  11. }
複製代碼
在程式碼第5與第9行中，我們呼叫getlanguage()函式去幫我們把語言版本Cookies「languagename」的值取回來比較，如果getlanguage()函式回傳的值是「big5」，就直接將瀏覽位置轉向到『中文繁體』版本的網頁去；若是「gb」，就直接將瀏覽位置轉向到『中文簡體』版本的網頁去。ㄚ如果getlanguage()函式回傳的值不是「big5」或「gb」怎麼辦？那就不做任何動作，等待瀏覽者選擇適當的版本。

身份判斷的函式checklanguage()要在網頁下載時就予以呼叫，以便開始進行身份判斷的動作：
  1. <body background="bg.gif" onLoad="checklanguage()">
複製代碼
[attach]729[/attach]
作者: 小誌    時間: 2010-5-19 08:17

擷取語言版本的Cookies
Cookies「languagename」的值關係著整體的變化，當身份判斷函式「checklanguage()」要進行判斷時，就要進行Cookies「languagename」的取值動作，而這個擷取Cookies值的工作就交由擷取函式「getlanguage()」來負責：

getlanguage函式[擷取Cookies的值]
  1. function getlanguage(name)
  2. {
  3. name = name + "="
  4. if (document.cookie.length > 0)
  5. {
  6. position = document.cookie.indexOf(name)
  7. if (position != -1)
  8. {
  9. position = position + name.length
  10. endposition = document.cookie.indexOf(";" , position)
  11. if (endposition == -1)
  12. {
  13. endposition = document.cookie.length
  14. }
  15. return unescape(document.cookie.substring(position,endposition))
  16. }
  17. }
  18. return null
  19. }
複製代碼
使用getlanguage()函式來擷取Cookies的值，務必給予函式一個Cookies的名稱，這樣函式才知道是要擷取那一個Cookies的值！
作者: 小誌    時間: 2010-5-19 08:21

設定語言版本的Cookies
  當網友第一次光臨時，我們會請他進行語言版本的設定，在網頁中我們放置了兩個語言版本的選擇圖片，並且為圖片加上了超鏈結，這個超鏈結可不是要連解到其他網頁呦！在鏈結標籤中是使用JavaScript的虛擬協定，它會去呼叫我們的setlanguage()函式，setlanguage()函式將瀏覽者所選擇的語言版本設定值儲存到名為「languagename」的Cookies裡：
  1. <p align="center">
  2. <a href="javascript:setlanguage('big5')">
  3. <img border="0" src="big5.gif"></a></p>
  4. <p align="center">
  5. <a href="javascript:setlanguage('gb')">
  6. <img border="0" src="gb.gif"></a></p>
複製代碼
[attach]730[/attach]

使用setlanguage()函式來儲存Cookies的值，必須給予函式一個Cookies的『值』！

setlanguage函式[儲存Cookies的值]
  1. function setlanguage(language)
  2. {
  3. begindate = new Date()
  4. enddate =new Date()
  5. enddate.setDate( begindate.getDate() + 365 )

  7. document.cookie="languagename=" + escape(language) + "; expires=" + enddate.toGMTString()

  9. if (language=="big5")
  10. {
  11. window.location="big5.htm"
  12. }
  13. else if (language=="gb")
  14. {
  15. window.location="gb.htm"
  16. }
  17. }
複製代碼
setlanguage()函式的內容分為兩個部分，第一個部分為程式碼第3至7行，這段程式敘述是用來寫入Cookies的值，以及設定Cookies的到期日；第二個部分為程式碼第9至16行，用來進行網頁版本的轉向。

test.htm [語言版本判斷與設定]
  1. <html>

  3. <head>
  4. <meta http-equiv="Content-Language" content="zh-tw">
  5. <meta http-equiv="Content-Type" content="text/html; charset=big5">
  6. <title>網頁版本檢查</title>
  7. </head>

  9. <SCRIPT Language="JavaScript">
  10. //取得語言版本的cookies值擷取函式
  11. function getlanguage(name)
  12. {
  13. name = name + "="
  14. if (document.cookie.length > 0)
  15. {
  16. position = document.cookie.indexOf(name)
  17. if (position != -1)
  18. {
  19. position = position + name.length
  20. endposition = document.cookie.indexOf(";" , position)
  21. if (endposition == -1)
  22. {
  23. endposition = document.cookie.length
  24. }
  25. return unescape(document.cookie.substring(position,endposition))
  26. }
  27. }
  28. return null
  29. }

  31. //設定語言版本的cookies值函式
  32. function setlanguage(language)
  33. {
  34. //建立日期時間物件
  35. begindate = new Date()
  36. enddate =new Date()
  37. //設定Cookies到期日
  38. enddate.setDate( begindate.getDate() + 365 )
  39. //寫入Cookies的資料及到期日
  40. document.cookie="languagename=" + escape(language) + "; expires=" + enddate.toGMTString()

  42. //設定好語言版本後,將網頁轉向至瀏覽者選擇的語言網頁去
  43. if (language=="big5")
  44. {
  45. window.location="big5.htm"
  46. }
  47. else if (language=="gb")
  48. {
  49. window.location="gb.htm"
  50. }
  51. }

  53. //檢查是否已來站參觀過並設定過語言
  54. function checklanguage()
  55. {
  56. if (getlanguage("languagename")=="big5")
  57. {
  58. window.location="big5.htm"
  59. }
  60. else if (getlanguage("languagename")=="gb")
  61. {
  62. window.location="gb.htm"
  63. }
  64. }
  65. </SCRIPT>

  67. <!-- 網頁載入時立即呼叫身份判斷函式 -->
  68. <body background="bg.gif" onLoad="checklanguage()">
  69. <p align="center">
  70. <img border="0" src="twbtsb1.gif"></p>
  71. <p align="center">
  72. <img border="0" src="choose.gif"></p>
  73. <p align="center">
  74. <!-- 中文繁體的鏈結 -->
  75. <a href="javascript:setlanguage('big5')">
  76. <img border="0" src="big5.gif"></a></p>
  77. <p align="center">
  78. <!-- 中文繁體的鏈結 -->
  79. <a href="javascript:setlanguage('gb')">
  80. <img border="0" src="gb.gif"></a></p>
  81. </body>

  83. </html>
複製代碼
完整應用範例壓縮檔下載:[attach]731[/attach]



歡迎光臨 麻辣家族討論版版 (http://forum.twbts.com/)