2012年3月27日星期二

網頁設計筆記(二十四) 一頁式網頁 HTML5′s pushState


原文:How to use HTML5′s pushState

如我所承諾,我將會寫一個關於使用HTML5′s pushState的教程。
如果你不懂得HTML 或 pushState,這篇網誌不適合你。這個教程是為了那些對HTML 或JavaScript有相關經驗的人。在我開始之前,我需要確認你已經準備好使用HTML5和pushState,這裏的程式是我寫的,在  Github 上有一檔案助我想出如何使用popState。上一次我使用pushState,我使用了iFrames記錄下來。你需要知道這裏的代碼是不完整的。這表示你需要學會使用你的代碼來使它可以運行。

甚麼是 pushState?

事實上,它叫history.pushState,但我會叫它作 pushState,寫起來較方便。pushState是用來在沒有重新載入頁面的情況下改變URL。 Github and Facebook使用pushState。它和 location.hash相似,但更酷。但我還是建議使用location.hash,因為一些蹩腳的瀏覽器不支援pushState,例如IE。除了pushState,還有個叫 replaceState的東西,它會改變URL但又不加進瀏覽器記錄,但這教程只會聚焦於pushState。

pushState的重點?

PushState是十分酷的,它使瀏覽網頁的速度更快,感覺更棒。

history.pushState的相容性

PushState works in Google Chrome, Firefox 4 and up(doesn’t work in Firefox 3 or lower) and Safari. PushState does not work in Internet Explorer 9 or lower nor does it work on iPhones.
PushState 能在Google chrome,Firefox 4和Safari等瀏覽器下執行。但不相容於IE9及以下。

你需要的東西:

  •  一個html編輯器例如Dreamweaver 或 notepad++。當然你可以用windows內置的文件編輯器notepad 或蘋果電腦的wordpad,總之將檔案儲成html即可。
  • 一個好的瀏覽器,不要使用IE,IE不支援 PushState 。
  • JQuery程式庫。 
  • 一些編程經驗。
  • 耐心,因為你要明白一些門外漢不會明白的東西。
  • .HTACCESS 和 PHP. 這不是必需,但如果有人重新載入頁面(按F5),會得到404錯誤。.HTACCESS能重導向到正確的地方。
  • 一個真的網頁。
當你有以上的東西,可以開始了,首先你要有一個網頁,如果沒有,做一個。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<a href="link1">Link 1</a> <a href="link2">Link 2</a>
</body>
</html>
這十分簡單。第二,加入JQuery 函式庫。

<script src="path/to/your/jquery.js" type="text/javascript"></script>
第三,開始加入JavaScript代碼。我將會解釋每一句代碼。我的最終目的是取得連結和劫持它。如果你不明白我的話可以 看這個網頁 ,閱讀一下有關劫持連結。以下是代碼:
<script language="javascript" type="text/javascript">
<!--
// The following script was created by Dakota Wyatt from Dcoinc.net.
$(document).ready(function(e) {
    $("#nav a").click(function(e){
  e.preventDefault();
  var url = $(this).attr("href");
  history.pushState({page:url}, url, url);
  updateSite(url);
 });
});
-->
</script>
Don’t worry about the “updateSite()” function. We’ll get to that later.
不要擔心“updateSite()” 這個函式,我會在下面完成它。

Now to explain the code. Everything in bold requires JQuery.現在解釋一下代碼。粗字是用到JQuery的。

$(document).ready(function(){...}); 是當DOM準備好就執行JQuery事件,沒有這句,代碼沒法運作。
$("a").click(function(e){..}); 是一個函式,當你點擊連結,它就會執行,呼叫pushState事件。
e.preventDefault(); 是JQuery事件用來防止瀏覽器旳預設行為,即停止瀏覽器去連結的原來目的地。
var url = $(this).attr("href"); 是用來儲存URL,這是需要的,因為我們要告訴瀏覽器我們要去哪個頁面。
history.pushState(state object, title(useless), url); 是用來改變瀏覽器上網址列的URL,但同時不會重新載入頁面。第一個參數是狀態(我不太懂它),第二個參數是標題,但好像太部份瀏覽器都不理會它。第三個數就是改變的URL。
updateSite(); 是客製函式用來改變網頁的內容,如你所見,我們未完成它。

使用 popState.

PopState 是一個事件,每當瀏覽器的瀏覽記錄改變,它就會行。沒有PopState,pushState 形同廢物。用以下代碼就可以偵測到記錄的改變。
 
$(window).bind("popstate", function(e){
 var state = = event.state;
 if(state){
  updateSite(state.page);
 }else{
  updateSite("home");
 }
 });
這代碼使用JQuery bind事件來檢查popState。
解釋:
這個教程裏沒有使用到狀態物件,僅從URL取得內容。
$(window).bind("popstate", function(e){..});是用來偵測瀏覽記錄的改變。
var state = event.state; 用來讀取由pushState產生的狀態物件。
if(state){..}else{…} 這個if else 判斷用來檢查有沒有狀態物件,沒有這句會產生error。
updateSite(state.page); 是未完成的客製函式,state.page 部份包含了頁面物件(來自狀態變數)。如果你看看看pushState的第一個參數,你會發現我們設定了物件為URL。
狀態→變數
頁面→物件
這應該較易理解。
這十分簡單,接著我們寫updateSite函式。當你按上一頁/下一頁時可以注意到 pushState 的執行。
function updateSite(currentPage){
 // load your pages using the currentPage variable. To test it first, add an alert function like:
        // alert(currentPage);
}
alert(currentPage);這代碼十分簡單,完全根據你的需要,如你所見,函式中沒有沒有東西,你需要加上自己需的東西。如果你想測試它是否正常執行,你可以加一句: alert(currentPage);

你要用pushState就是這裏的一切。

很簡單是吧?Facebook令它十分難以理解。恭喜你,你現在知道Facebook如何做到那樣炫的效果了。這都不是魔法,是pushState和popState。在完結之前,等我展示所有的代碼。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<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) {
    $("#nav a").click(function(e){
  e.preventDefault();
  var url = $(this).attr("href");
  history.pushState({page:url}, url, url);
  updateSite(url);
 });
});
$(window).bind("popstate", function(e){
 var state = event.state;
 if(state){
  updateSite(state.page);
 }else{
  updateSite("home");
 }
 });
function updateSite(currentPage){
 // load your pages using the currentPage variable. To test it first, add an alert function like:
        // alert(currentPage);
}
-->
</script>
</head>

<body>
<a href="link1">Link 1</a> <a href="link2">Link 2</a>
</body>
</html>
複製以上代碼,貼在編輯器,儲蓄和測試它。
我希望這個教程能幫助你,如果它成功,請向你的編程朋友傳遞開去,我會寫更多教程覆蓋更多的未寫過的題目。
如果你有困難請留下評論。