返回列表 上一主題 發帖

[教學] (教學第29篇) Cookies 應用_瀏覽者的語言版本

[教學] (教學第29篇) Cookies 應用_瀏覽者的語言版本

「網路無國界,世界是一家」,你以為網路上的資訊有國別或地域的區分嗎?當然沒有!世界各國使用各種語言的網友都有可能光臨你的網站,以小誌的網站來說,有來自台灣、香港、中國大陸、甚至加拿大的網友來參觀,因此,為服務世界各國使用各種語言的網友,你可能將網站規劃成有多國語言的版本,當網友來參觀時,可自由選擇他適合的語言版本來瀏覽。
11-7.png
2010-5-19 08:13


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


在本範例程式中,我們只需要一個Cookies,它的名稱是:「Languagename」,它是用來記錄瀏覽者的語言版本,其值有下列三種可能:

  • big5:曾經來參觀過網站,而且,所選擇的語言版本為中文繁體。
  • GB:曾經來參觀過網站,而且,所選擇的語言版本為中文簡體。
  • null:以前沒來過,是第一次來訪,必須選擇語言版本。
心安,平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

身份判斷的函式
當訪客進入你的首頁,我們第一件要做的事是先去確認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()">
複製代碼
11-9.png
2010-5-19 08:15
心安,平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

擷取語言版本的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的值!
心安,平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

設定語言版本的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>
複製代碼
11-10.png
2010-5-19 08:21


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

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

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

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

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

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

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

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

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

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

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

  76. </html>
複製代碼
完整應用範例壓縮檔下載: cookies.rar (31.75 KB)
心安,平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

        靜思自在 : 口說一句好話,如口出蓮花;口說一句壞話如口吐毒蛇。
返回列表 上一主題