2012年2月25日星期六

網頁設計筆記(二十一) 一頁式網頁 location.hash

原文:How to use location.hash

甚麼是 location.hash?

Location.hash是一些 JavaScript,能夠製造動態同時保留瀏覽記錄的一頁式網頁。如果你仍未了解我說的什麼,那就容我詳細一點解釋,畢竟這是我第一個教學文章。比方說你有一個網站,包含20頁內容,但你並不想每一頁也從新製作,又或是你的網站伺服器沒有足夠的空間儲存20頁內容?如果你用其中某一頁網頁就能動態地載入指定的網頁,而且能夠使用"上一頁"、"下一頁"的功能?又如果你正製作一個網頁應用程式,你不想一按下f5重新載入,網頁就會亂成一團。Location.hash能夠助你解決以上種種。
要製作一個動態一頁式網頁,你需要使用JavaScript來讀取URL上的hash(#)值來決定載入那一頁內容。

甚麼是hash值?

我不知道它的正確名稱,我一向就這麼稱它。hash值是指在URL中跟隨著#的字串。舉個例說,http://www.mywebsite.com/#hashvalue。當你在一個一頁式商務網站中點擊"關於我們"按鈕,URL就會由 http://www.bizsite.com 變成 http://www.bizsite.com/#about. 這個動作指示網站伺服器載入about那一頁的內容。

如何用location.hash?

別催我,我只是在開始前確保你明白所有東西。在我們認真開始前,你需要幾樣東西。第一,一個html編輯器例如Dreamweaver 或 notepad++。當然你可以用windows內置的文件編輯器notepad 或蘋果電腦的wordpad,總之將檔案儲成html即可。第二,你需要置入JQuery函式庫,其實它不是必需的,只是我的一部份程式使用了它。你可以到jquery.com下載JQuery。最後一樣你需要的(最重要)是一些有關html,css,JavaScript的編程經驗。如何你想要一個好樣的網站和明白我的鬼話連篇,這是必須的。
這個教程告訴你如何用location.hash。但我沒有展示如何建立一個完備的網站。如果你想學會如何做一個網站,那你去錯地方了!還有,我所展示的只是我的方法,世上還有其它方法去做到同樣的效果。
備註:這方法能在所有瀏覽器執行,除了iPhone。onHashChange不支援手機版的safari。未來的新iPhone 5 可能得,但現在的尚未可行。如果你在建立一個網頁應用程式,你需要取代onHashChange的程式碼去使iPhone順暢運行。我不懂有關網頁應用程式開發,請恕我無能為力。
準備好了?好,開始吧!
首先,我會做一個帶有hash 值的超連結。寫法如下:<a href="#myhash">這是一個超連結</a>  現在儲存檔案成.html的格式並在瀏覽器中測試。
當你按下連結,唯一會改變的就是URL。很厲害是吧?現在我們去真正的部份,你將會用普通的連結而非hash連結做到同樣效果。

真正使用location.hash

要用location.hash做一個一頁式網站,你首先需要做一個檢查看看網頁有沒有在使用hash值。這有助於當某人將該頁加入成書籤/我的最愛。這個檢查你可以用onLoad 事件或JQuery 的ready event(備妥處理器)。
以下是寫法:
<script src="path/to/your/jquery.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(e){
 if(location.hash){
  var newhash = window.location.hash.substring(1); 
        }else{
              // alert("No hash available.");
        }
});
</script>
這段代碼檢查有沒有hash值在運行中。如果有,我們能改變網頁容成我們想要的內容。如果沒有,可以不執行任何動作或載入主頁。我使用substring除去hash值的hash(#),即#xxx→xxx。如果你需要保留hash(#),你可以刪掉“.substring(1)”。你可以刪去註解前的//,以彈出式視窗盒子測試一下運行的結果,如果你的測試沒有反應,請重新載入網頁和確保代碼正確地輸入。 

解話時間

$(document).ready(…); 指示該段程式在DOM完成後才執行。如果不是這樣設定,程式就會執行得太早。如果你不想用JQuery的方法,可以用以下方法:
document.onLoad = function(){
     // The code in the middle goes here.
}
當然,這是只我的寫法,還有各種寫法。
if(location.hash){…}檢查有沒有hash值。如果有,它就會執行你想要的效果。
var newhash = window.location.hash.substring(1);
這段程式會用一個變數儲存要載入的內容的名稱。

接下來是劫持連結的部分。

劫持連結指停止網頁轉頁(瀏覽器原本的行為)並轉頁到你指定的地方。為什麼?好簡單,如果你想做一個動態一頁式網頁和一些混蛋不使用JavaScript去瀏覽你的網頁。如果使用了hash,URL會改變。同時,我們需要一個靜態網頁給那些關了JavaScript的混蛋。
代碼如下:
$("a").click(function(e){
  e.preventDefault();
  window.location.hash = $(this).attr("href");
 });
以上代碼,預防了連結的瀏覽器預設行為(離開及到目標頁),代碼只會改變hash值。

Now to explain this piece of code:

$(“a”).click(function(e){…}); 指明當連結被點擊,瀏覽器不會跳到原來指定的地方,瀏覽器會留在原來的頁面,繼而改變hash 值。
e.preventDefault();是jQuery的事件,用作防止瀏覽器的預設行為,即點擊連結時的跳頁。
這裡有關 preventDefault.的資料。
window.location.hash = $(this).attr(“href”);透過加上hash值改變了URL,如果URL上已經有hash值,它就會將新的hash值蓋過舊的hash值。
使用onHashChange偵測hash改變,onHashChange是一JavaScript的其中一個事件。在onHashChange事件出現之前,Google是利用iFrames去追蹤hash值的改變。現在則不需用iFrames了。
window.onhashchange = function(){
        // hash changed. Do something cool.
        if(location.hash){
             var hash = location.hash.substring(1);
             // load page
             // alert(hash);
        }else{
             // load home page
             // alert("home");
        }
}
onHashChange事件,你能使用一個function去改變網頁的內容。你能透過hash值去知道去改變的是什麼(就是要載入的頁),也可透過hash值知道當前的頁是那個。   onHashChange不能在iPhones上執行。(iPhones 4未經測試,有興趣請測試一下)

解釋:

window.onHashChange = function(){…} 用作偵測hash的改變,如例子所示,你點擊連結以前進或後退。 if(location.hash){…}檢查有沒有hash值。這是必需的。如果你不加入這代碼,你會得到錯誤的訊息。
這是基本的 location.hash。我沒有完成全部的工作,這裡只展示hash改變和對它反應,其它的,你必需獨自完成。 
完整代碼:

<script src="path/to/your/jquery.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
<!--
// The following script was created by Dakota Wyatt from Dcoinc.net.
$(document).ready(function(e){
 if(location.hash){
                // We got a hash value! Lets take off the hash and smoke it.
  var newhash = window.location.hash.substring(1);
                // place your code here to change the content.
                // alert(newhash);
                // uncomment the above code to see if it works.
        }else{
               // alert("No hash available.");
              // no hash value
        }
        $("a").click(function(e){
  e.preventDefault();
  window.location.hash = $(this).attr("href");
 });
});
window.onhashchange = function(){
        // hash changed. Do something cool.
        if(location.hash){
             var hash = location.hash.substring(1);
             // load page
             // alert(hash);
        }else{
             // load home page
             // alert("home");
        }
}
</script>
以上程序不能單獨運行,你必需將它和你的網頁結合,如果你想測試它,請解除註解。

我應該在我的網頁用Location.hash嗎?

你應該應用它,但你需要確保那些不使用JavaScript的人能順利看到網頁。why?因為有20%的互聯網使用者是沒有啓用JavaScript引擎。Google,Facebook,Twitter等公司雖然也有用location.hash,但同時支援不使用JavaScript的人。我不知道它們的實際用法,但相信大同小異。 如果你想知道如何改變URL,而不單使用Hash值,那你需要HTML5 pushState,遲點我會補上一個教程。 希望你享受這個教程和學到點東西。我盡量使這教程簡單,遲些,我會做一個測試頁,好讓你們可以看到以上代碼的效果。