小誌

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

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

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

1^# 跳轉到 » 倒序看帖

打印

字體大小: tT

發表於 2010-5-19 08:13 | 只看該作者

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

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

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

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

big5：曾經來參觀過網站，而且，所選擇的語言版本為中文繁體。
GB：曾經來參觀過網站，而且，所選擇的語言版本為中文簡體。
null：以前沒來過，是第一次來訪，必須選擇語言版本。

樓主熱帖

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

小誌

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

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

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

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

2^#

發表於 2010-5-19 08:15 | 只看該作者

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

checklanguage函式[身份判斷]

function checklanguage()
{
if (getlanguage("languagename")=="big5")
{
window.location="big5.htm"
}
else if (getlanguage("languagename")=="gb")
{
window.location="gb.htm"
}
}

複製代碼

在程式碼第5與第9行中，我們呼叫getlanguage()函式去幫我們把語言版本Cookies「languagename」的值取回來比較，如果getlanguage()函式回傳的值是「big5」，就直接將瀏覽位置轉向到『中文繁體』版本的網頁去；若是「gb」，就直接將瀏覽位置轉向到『中文簡體』版本的網頁去。ㄚ如果getlanguage()函式回傳的值不是「big5」或「gb」怎麼辦？那就不做任何動作，等待瀏覽者選擇適當的版本。

身份判斷的函式checklanguage()要在網頁下載時就予以呼叫，以便開始進行身份判斷的動作：

<body background="bg.gif" onLoad="checklanguage()">

複製代碼

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

TOP

小誌

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

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

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

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

3^#

發表於 2010-5-19 08:17 | 只看該作者

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

getlanguage函式[擷取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
}

複製代碼

使用getlanguage()函式來擷取Cookies的值，務必給予函式一個Cookies的名稱，這樣函式才知道是要擷取那一個Cookies的值！

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

TOP

小誌

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

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

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

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

4^#

發表於 2010-5-19 08:21 | 只看該作者

設定語言版本的Cookies
當網友第一次光臨時，我們會請他進行語言版本的設定，在網頁中我們放置了兩個語言版本的選擇圖片，並且為圖片加上了超鏈結，這個超鏈結可不是要連解到其他網頁呦！在鏈結標籤中是使用JavaScript的虛擬協定，它會去呼叫我們的setlanguage()函式，setlanguage()函式將瀏覽者所選擇的語言版本設定值儲存到名為「languagename」的Cookies裡：

<a href="javascript:setlanguage('big5')">
<img border="0" src="big5.gif"></a>
<a href="javascript:setlanguage('gb')">
<img border="0" src="gb.gif"></a>

複製代碼

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

setlanguage函式[儲存Cookies的值]

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

複製代碼

setlanguage()函式的內容分為兩個部分，第一個部分為程式碼第3至7行，這段程式敘述是用來寫入Cookies的值，以及設定Cookies的到期日；第二個部分為程式碼第9至16行，用來進行網頁版本的轉向。

test.htm [語言版本判斷與設定]

<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()">
<img border="0" src="twbtsb1.gif">
<img border="0" src="choose.gif">
<a href="javascript:setlanguage('big5')">
<img border="0" src="big5.gif"></a>
<a href="javascript:setlanguage('gb')">
<img border="0" src="gb.gif"></a>
</body>
</html>

複製代碼

完整應用範例壓縮檔下載:

cookies.rar (31.75 KB)

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

TOP