摘要：因?yàn)闆](méi)有刷新，所以對(duì)于單頁(yè)面應(yīng)用，改變其是不可能的。然后，現(xiàn)在對(duì)于的來(lái)說(shuō)，這些都是可以輕易實(shí)現(xiàn)的，但是由于單頁(yè)面應(yīng)用沒(méi)必要使用散列值，它可能需要額外的開發(fā)腳本。為了更容易的創(chuàng)建有效率的對(duì)友好的單頁(yè)面應(yīng)用，它移除了對(duì)散列值的依賴。

原文：An Introduction To The HTML5 History API

譯文：關(guān)于HTML 5 History API 的介紹

譯者：dwqs

History是有趣的，不是嗎？在之前的HTML版本中，我們對(duì)瀏覽歷史記錄的操作非常有限。我們可以來(lái)回使用可以使用的方法，但這就是一切我們能做的了。

但是，利用HTML 5的History API，我們可以更好的控制瀏覽器的歷史記錄了。例如：我們可以添加一條記錄到歷史記錄的列表中，或者在沒(méi)有刷新時(shí)，可以更新地址欄的URL。

在這篇文章中，我們將了解HTML 5中History API的來(lái)源。在此之前，我們經(jīng)常使用散列值來(lái)改變頁(yè)面內(nèi)容，特別是那些對(duì)頁(yè)面特別重要的內(nèi)容。因?yàn)闆](méi)有刷新，所以對(duì)于單頁(yè)面應(yīng)用，改變其URL是不可能的。此外，當(dāng)你改變URL的散列值值，它對(duì)瀏覽器的歷史記錄沒(méi)有任何影響。

然后，現(xiàn)在對(duì)于HTML 5的History API來(lái)說(shuō)，這些都是可以輕易實(shí)現(xiàn)的，但是由于單頁(yè)面應(yīng)用沒(méi)必要使用散列值，它可能需要額外的開發(fā)腳本。它也允許我們用一種對(duì)SEO友好的方式建立新應(yīng)用。此外，它能減少帶寬，但是該怎么證明呢？

在文章中，我將用History API開發(fā)一個(gè)單頁(yè)應(yīng)用來(lái)證明上述的問(wèn)題。

這也意味著我必須先在首頁(yè)加載必要的資源。現(xiàn)在開始，頁(yè)面僅僅加載需要的內(nèi)容。換句話說(shuō)，應(yīng)用并不是一開始就加載了全部的內(nèi)容，在請(qǐng)求第二個(gè)應(yīng)用內(nèi)容時(shí)，才會(huì)被加載。

注意,您需要執(zhí)行一些服務(wù)器端編碼只提供部分資源,而不是完整的頁(yè)面內(nèi)容。

在寫這篇文章的時(shí)候，各主流瀏覽器對(duì)History API的支持是非常不錯(cuò)的，可以點(diǎn)擊此處查看其支持情況，這個(gè)鏈接會(huì)告訴你支持的瀏覽器，并使用之前，總有良好的實(shí)踐來(lái)檢測(cè)支持的特定功能。

為了用變成方式確定瀏覽器是否支持這個(gè)API，可以用下面的一行代碼檢驗(yàn)：

return !!(window.history && history.pushState);

此外,我建議參考一下這篇文章:Detect Support for Various HTML5 Features.(譯文：http://www.ido321.com/1116.html)

如果你是用的現(xiàn)代瀏覽器，可以用下面的代碼：

if (Modernizr.history) {
    // History API Supported
}

如果你的瀏覽器不支持History API，可以使用history.js代替。

HTML 5提供了兩個(gè)新方法：

1、history.pushState(); 2、history.replaceState();

兩種方法都允許我們添加和更新歷史記錄，它們的工作原理相同并且可以添加數(shù)量相同的參數(shù)。除了方法之外，還有popstate事件。在后文中將介紹怎么使用和什么時(shí)候使用popstate事件。

pushState()和replaceState()參數(shù)一樣，參數(shù)說(shuō)明如下：

1、state：存儲(chǔ)JSON字符串，可以用在popstate事件中。

2、title：現(xiàn)在大多數(shù)瀏覽器不支持或者忽略這個(gè)參數(shù)，最好用null代替

3、url：任意有效的URL，用于更新瀏覽器的地址欄，并不在乎URL是否已經(jīng)存在地址列表中。更重要的是，它不會(huì)重新加載頁(yè)面。

兩個(gè)方法的主要區(qū)別就是：pushState()是在history棧中添加一個(gè)新的條目，replaceState()是替換當(dāng)前的記錄值。如果你還對(duì)這個(gè)有迷惑，就用一些示例來(lái)證明這個(gè)區(qū)別。

假設(shè)我們有兩個(gè)棧塊，一個(gè)標(biāo)記為1,另一個(gè)標(biāo)記為2，你有第三個(gè)棧塊，標(biāo)記為3。當(dāng)執(zhí)行pushState()時(shí)，棧塊3將被添加到已經(jīng)存在的棧中，因此，棧就有3個(gè)塊棧了。

同樣的假設(shè)情景下，當(dāng)執(zhí)行replaceState()時(shí)，將在塊2的堆棧和放置塊3。所以history的記錄條數(shù)不變，也就是說(shuō)，pushState()會(huì)讓history的數(shù)量加1.
比較結(jié)果如下圖：

到此，為了控制瀏覽器的歷史記錄，我們忽略了pushState()和replaceState()的事件。但是假設(shè)瀏覽器統(tǒng)計(jì)了許多的不良記錄，用戶可能會(huì)被重定向到這些頁(yè)面，或許也不會(huì)。在這種情況下，當(dāng)用戶使用瀏覽器的前進(jìn)和后退導(dǎo)航按鈕時(shí)就會(huì)產(chǎn)生意外的問(wèn)題。

盡管當(dāng)我們使用pushState()和replaceState()進(jìn)行處理時(shí)，期待popstate事件被觸發(fā)。但實(shí)際上，情況并不是這樣。相反，當(dāng)你瀏覽會(huì)話歷史記錄時(shí)，不管你是點(diǎn)擊前進(jìn)或者后退按鈕，還是使用history.go和history.back方法，popstate都會(huì)被觸發(fā)。

In WebKit browsers, a popstate event would be triggered after document’s onload event, but Firefox and IE do not have this behavior.（在WebKit瀏覽器中，popstate事件在document的onload事件后觸發(fā)，F(xiàn)irefox和IE沒(méi)有這種行為）。

HTML：

    

        

            
Home
            
About
            
Contact
        
    
    

        

            

                Click on Links above to see history API usage using pushState method.
            
        
        
   
            

                
Home!
                
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            
        
    

JavaScript：

歷史條目在瀏覽器中被計(jì)算，并且可以很容易的使用瀏覽器的前進(jìn)和后退按鈕。View Demo （ps:你在點(diǎn)擊demo1的選項(xiàng)卡時(shí)，其記錄會(huì)被添加到瀏覽器的歷史記錄，當(dāng)點(diǎn)擊后退/前進(jìn)按鈕時(shí)，可以回到/跳到你之前點(diǎn)擊的選項(xiàng)卡對(duì)應(yīng)的頁(yè)面）

歷史條目在瀏覽器中被更新，并且不能使用瀏覽器的前進(jìn)和后退按鈕進(jìn)行瀏覽。View Demo （ps:你在點(diǎn)擊demo1的選項(xiàng)卡時(shí)，其記錄會(huì)被替換當(dāng)前瀏覽器的歷史記錄，當(dāng)點(diǎn)擊后退/前進(jìn)按鈕時(shí)，不可以回到/跳到你之前點(diǎn)擊的選項(xiàng)卡對(duì)應(yīng)的頁(yè)面，而是返回/跳到你進(jìn)入demo2的上一個(gè)頁(yè)面）

HTML 5中的History API 對(duì)Web應(yīng)用有著很大的影響。為了更容易的創(chuàng)建有效率的、對(duì)SEO友好的單頁(yè)面應(yīng)用，它移除了對(duì)散列值的依賴。

原文首發(fā)：http://www.ido321.com/1069.html