(教學第29篇) Cookies 應用_瀏覽者的語言版本
「網路無國界，世界是一家」，你以為網路上的資訊有國別或地域的區分嗎？當然沒有！世界各國使用各種語言的網友都有可能光臨你的網站，以小誌的網站來說，有來自台灣、香港、中國大陸、甚至加拿大的網友來參觀，因此，為服務世界各國使用各種語言的網友，你可能將網站規劃成有多國語言的版本，當網友來參觀時，可自由選擇他適合的語言版本來瀏覽。[attach]727[/attach]
當世界各國使用各種語言的網友每次來到你的網站，如果網友第一次光臨網站請人家選擇適當的語言版本來瀏覽，這是無可厚非的，但網友若是再度光臨，你又要人家選擇一次語言版本來瀏覽，這太麻煩了，好像不是很好的待客之道，所以，我們可以利用Cookies來做記錄ㄚ，當網友第一次光臨時，請他選擇適當的語言版本來瀏覽，如上圖，而他再度光臨我們網站時，不需要再選擇一次語言版本，我們會直接轉向網頁到適合它的語文版本去。
[attach]728[/attach]
在本範例程式中，我們只需要一個Cookies，它的名稱是：「Languagename」，它是用來記錄瀏覽者的語言版本，其值有下列三種可能：
[list]
[*]big5：曾經來參觀過網站，而且，所選擇的語言版本為中文繁體。
[*]GB：曾經來參觀過網站，而且，所選擇的語言版本為中文簡體。
[*]null：以前沒來過，是第一次來訪，必須選擇語言版本。
[/list] [color=DarkOrange][size=5][b]身份判斷的函式[/b][/size][/color]
當訪客進入你的首頁，我們第一件要做的事是先去確認Cookies「languagename」的值，如果Cookies「languagename」存在，則代表訪客曾經來過，接著才開始判斷Cookies「languagename」的值，如果其值為「big5」，代表訪客要瀏覽的是『中文繁體』版本的網頁，我們就直接將瀏覽位置轉向到『中文繁體』版本的網頁去；而其值若是「gb」，代表訪客要瀏覽的是『中文簡體』版本的網頁，就將瀏覽位置轉向到『中文簡體』版本的網頁去，我們把這個身份判斷的函式命名為「checklanguage()」：
checklanguage函式[身份判斷][code]function checklanguage()
{
if (getlanguage("languagename")=="big5")
{
window.location="big5.htm"
}
else if (getlanguage("languagename")=="gb")
{
window.location="gb.htm"
}
}[/code]在程式碼第5與第9行中，我們呼叫getlanguage()函式去幫我們把語言版本Cookies「languagename」的值取回來比較，如果getlanguage()函式回傳的值是「big5」，就直接將瀏覽位置轉向到『中文繁體』版本的網頁去；若是「gb」，就直接將瀏覽位置轉向到『中文簡體』版本的網頁去。ㄚ如果getlanguage()函式回傳的值不是「big5」或「gb」怎麼辦？那就不做任何動作，等待瀏覽者選擇適當的版本。
身份判斷的函式checklanguage()要在網頁下載時就予以呼叫，以便開始進行身份判斷的動作：[code]<body background="bg.gif" onLoad="checklanguage()">[/code][attach]729[/attach] [color=DarkOrange][size=5][b]擷取語言版本的Cookies[/b][/size][/color]
Cookies「languagename」的值關係著整體的變化，當身份判斷函式「checklanguage()」要進行判斷時，就要進行Cookies「languagename」的取值動作，而這個擷取Cookies值的工作就交由擷取函式「getlanguage()」來負責：
getlanguage函式[擷取Cookies的值][code]function getlanguage(name)
{
name = name + "="
if (document.cookie.length > 0)
{
position = document.cookie.indexOf(name)
if (position != -1)
{
position = position + name.length
endposition = document.cookie.indexOf(";" , position)
if (endposition == -1)
{
endposition = document.cookie.length
}
return unescape(document.cookie.substring(position,endposition))
}
}
return null
}[/code][color=Red]使用getlanguage()函式來擷取Cookies的值，務必給予函式一個Cookies的名稱，這樣函式才知道是要擷取那一個Cookies的值！[/color] [color=DarkOrange][size=5][b]設定語言版本的Cookies[/b][/size][/color]
當網友第一次光臨時，我們會請他進行語言版本的設定，在網頁中我們放置了兩個語言版本的選擇圖片，並且為圖片加上了超鏈結，這個超鏈結可不是要連解到其他網頁呦！在鏈結標籤中是使用JavaScript的虛擬協定，它會去呼叫我們的setlanguage()函式，[color=Red]setlanguage()函式將瀏覽者所選擇的語言版本設定值儲存到名為「languagename」的Cookies裡[/color]：[code]<p align="center">
<a href="javascript:setlanguage('big5')">
<img border="0" src="big5.gif"></a></p>
<p align="center">
<a href="javascript:setlanguage('gb')">
<img border="0" src="gb.gif"></a></p>[/code][attach]730[/attach]
[color=Red]使用setlanguage()函式來儲存Cookies的值，必須給予函式一個Cookies的『值』！[/color]
setlanguage函式[儲存Cookies的值][code]function setlanguage(language)
{
begindate = new Date()
enddate =new Date()
enddate.setDate( begindate.getDate() + 365 )
document.cookie="languagename=" + escape(language) + "; expires=" + enddate.toGMTString()
if (language=="big5")
{
window.location="big5.htm"
}
else if (language=="gb")
{
window.location="gb.htm"
}
}[/code][color=Red]setlanguage()函式的內容分為兩個部分，第一個部分為程式碼第3至7行，這段程式敘述是用來寫入Cookies的值，以及設定Cookies的到期日；第二個部分為程式碼第9至16行，用來進行網頁版本的轉向。[/color]
test.htm [語言版本判斷與設定][code]<html>
<head>
<meta http-equiv="Content-Language" content="zh-tw">
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>網頁版本檢查</title>
</head>
<SCRIPT Language="JavaScript">
//取得語言版本的cookies值擷取函式
function getlanguage(name)
{
name = name + "="
if (document.cookie.length > 0)
{
position = document.cookie.indexOf(name)
if (position != -1)
{
position = position + name.length
endposition = document.cookie.indexOf(";" , position)
if (endposition == -1)
{
endposition = document.cookie.length
}
return unescape(document.cookie.substring(position,endposition))
}
}
return null
}
//設定語言版本的cookies值函式
function setlanguage(language)
{
//建立日期時間物件
begindate = new Date()
enddate =new Date()
//設定Cookies到期日
enddate.setDate( begindate.getDate() + 365 )
//寫入Cookies的資料及到期日
document.cookie="languagename=" + escape(language) + "; expires=" + enddate.toGMTString()
//設定好語言版本後,將網頁轉向至瀏覽者選擇的語言網頁去
if (language=="big5")
{
window.location="big5.htm"
}
else if (language=="gb")
{
window.location="gb.htm"
}
}
//檢查是否已來站參觀過並設定過語言
function checklanguage()
{
if (getlanguage("languagename")=="big5")
{
window.location="big5.htm"
}
else if (getlanguage("languagename")=="gb")
{
window.location="gb.htm"
}
}
</SCRIPT>
<!-- 網頁載入時立即呼叫身份判斷函式 -->
<body background="bg.gif" onLoad="checklanguage()">
<p align="center">
<img border="0" src="twbtsb1.gif"></p>
<p align="center">
<img border="0" src="choose.gif"></p>
<p align="center">
<!-- 中文繁體的鏈結 -->
<a href="javascript:setlanguage('big5')">
<img border="0" src="big5.gif"></a></p>
<p align="center">
<!-- 中文繁體的鏈結 -->
<a href="javascript:setlanguage('gb')">
<img border="0" src="gb.gif"></a></p>
</body>
</html>[/code][color=Blue][size=4][b]完整應用範例壓縮檔下載:[/b][/size][/color][attach]731[/attach]
頁:
[1]