首頁 > web前端 > H5教程 > 主體

深入探究HTML5的History API_html5教學技巧

WBOY
發布: 2016-05-16 15:46:26
原創
1608 人瀏覽過

History是有趣的,不是嗎?在先前的HTML版本中,我們對瀏覽歷史記錄的操作非常有限。我們可以來回使用可以使用的方法,但這就是一切我們能做的了。

  但是,利用HTML 5的History API,我們可以更好的控制瀏覽器的歷史記錄了。例如:我們可以新增一筆記錄到歷史記錄的清單中,或是在沒有刷新時,可以更新網址列的URL。
  為什麼要介紹History API ?

  在這篇文章中,我們將了解HTML 5中History API的來源。在此之前,我們經常使用雜湊值來改變頁面內容,特別是那些對頁面特別重要的內容。因為沒有刷新,所以對於單頁應用,改變其URL是不可能的。此外,當你改變URL的雜湊值,它對瀏覽器的歷史記錄沒有任何影響。

  然後,現在對於HTML 5的History API來說,這些都是可以輕易實現的,但是由於單頁應用沒必要使用散列值,它可能需要額外的開發腳本。它也允許我們用一種對SEO友好的方式建立新應用。此外,它能減少頻寬,但是該怎麼證明呢?

  在文章中,我將用History API開發一個單頁應用程式來證明上述的問題。

  這也意味著我必須先在首頁載入必要的資源。現在開始,頁面只是載入需要的內容。換句話說,應用程式並不是一開始就載入了全部的內容,在請求第二個應用程式內容時,才會被載入。

  注意,您需要執行一些伺服器端編碼只提供部分資源,而不是完整的頁面內容。
  瀏覽器支援

  在寫這篇文章的時候,各主流瀏覽器對History API的支援是非常不錯的,可以點擊此處查看其支援情況,這個連結會告訴你支援的瀏覽器,並使用之前,總有良好的實踐來檢測支援的特定功能。

  為了用變成方式決定瀏覽器是否支援這個API,可以用下面的一行程式碼檢定:
 

XML/HTML Code複製內容到剪貼簿
  1. return !!(window.history && history.pushState);  

  此外,我建議參考這篇文章:Detect Support for Various HTML5 Features.(ps:後續會翻譯)

  如果你是使用的現代瀏覽器,可以用下面的程式碼:
 

XML/HTML Code複製內容到剪貼簿
  1. if (Modernizr.history) {   
  2.     // History API Supported   
  3. }  

  如果你的瀏覽器不支援History API,可以使用history.js來取代。
  使用History

  HTML 5提供了兩個新方法:

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

  兩種方法都允許我們新增和更新歷史記錄,它們的工作原理相同並且可以添加數量相同的參數。除了方法之外,還有popstate事件。在後文中將介紹怎麼使用和什麼時候使用popstate事件。

  pushState()和replaceState()參數一樣,參數說明如下:

  1、state:儲存JSON字串,可以用在popstate事件中。

  2、title:現在大多數瀏覽器不支援或忽略這個參數,最好用null取代

  3、url:任意有效的URL,用於更新瀏覽器的網址列,並不在乎URL是否已經存在網址清單中。更重要的是,它不會重新載入頁面。

  兩個方法的主要區別就是:pushState()是在history堆疊中新增一個新的條目,replaceState()是取代目前的記錄值。如果你還對這件事有迷惑,就用一些例子來證明這個差異。

  假設我們有兩個棧塊,一個標記為1,另一個標記為2,你有第三個棧塊,標記為3。當執行pushState()時,棧塊3將被加入到已經存在的棧中,因此,棧就有3個塊棧了。

  同樣的假設情境下,當執行replaceState()時,將在區塊2的堆疊和放置區塊3。所以history的記錄條數不變,也就是說,pushState()會讓history的數量加1.

  比較結果如下圖:
201579164334835.jpg (498×321)

到此,為了控制瀏覽器的歷史記錄,我們忽略了pushState()和replaceState()的事件。但假設瀏覽器統計了許多的不良紀錄,使用者可能會被重新導向到這些頁面,或許也不會。在這種情況下,當使用者使用瀏覽器的前進和後退導航按鈕時就會產生意外的問題。

  儘管當我們使用pushState()和replaceState()進行處理時,期待popstate事件被觸發。但實際上,情況並不是這樣。相反,當你瀏覽會話歷史記錄時,不管你是點擊前進或後退按鈕,還是使用history.go和history.back方法,popstate都會被觸發。

  In WebKit browsers, a popstate event would be triggered after document's onload event, but Firefox and IE do not have this behavior.(在WebKit瀏覽器中,popstaterefent種行為)。
  Demo範例

  HTML:
 

XML/HTML Code複製內容到剪貼簿
  1. div ===
  2. >
  3.        div ="行"
  4. >           ul ="導航導航欄-nav"
  5. >               li>li> href="home.html" 類別=>首頁a>< ;/>< ;/>
  6. < ;/>< ;/li>               li>li> href="about.html" 類別=>關於a>
  7. < ;/
  8. < ;/li>               li>li> href="contact.html" 類別=tory類別=tory類別=tory>
  9. 聯絡方式
  10. a>< ;/>
  11. < ;/
  12. >< ;/ li>  
  13.         ul> 🎜>> 🎜>> 🎜>> 🎜>
  14. >
  15.  🎜>> >     div>  
  16.     
  17. div ="行" >  
  18.         div class="col- md -6">               div div >  
  19.                 以上的連結使用代碼> 方法。                
  20. div
  21. >         div>
  22.   
  23.         div 
  24. ="行" >                   div 
  25. div
  26.  div 🎜> id="contentHolder">                h1h1
  27. h1h1>                   p
  28. 跨度 樣式=「寬度:自動;高度:自動;浮動:無;」 >「寬度:自動;高度:自動;浮動:無;」 >「寬度:自動;高度:自動;浮動:無;」 >「寬id="5_nwp">>>>>樣式="文本裝飾:無;" mpid ="5" 目標="_blank" "_blank"  ="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv =0&is_app=0&jk=6cb. &k0=列印&kdi0=0&luki=5&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=a0f646e7a54cc7&ssp2=1&stid=0&wwwt. /document/5360 .html&urlid=0"  id="5_nwl">> 樣式="顏色:#0000ff;字體大小:14px;寬度:自動;高度:auto;float:nnone; >打印跨度> a>跨度>
  29. 和排版產業。 p>  
  30.             div>         
  31. div>       
  32. div>  
  33. div>  
  JavaScript:

XML/HTML Code
複製內容到剪貼簿
  1. 腳本 ="text/類型="text/="text/ 跨度 style="寬度:自動; 高度:自動; 浮動:無;”id=「1_nwp」> a  a  a  a  a >>樣式>="文字裝飾:無;" mpid="1"="1" 目標="_blank" href=" http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di= 128&fv=0&is_app=0&jk=f7cb547a6e640f0a&p=dscriptn&jk=fbdi 06011078_cpr&rb=0&rs=1&seller_id=1&sid=a0f646e7a54cbf7&ssp2=1&stid =0&t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com > id="1_nwl">< ;跨度 樣式
  2. =
  3. "顏色:#0000ff;字體大小:14px;寬度:自動;高度:自動;浮動:無;「
  4. >
  5. javascript
  6. 跨度
  7. >
  8. a
  9. >a>>
  10. >>
  11. >
  12. 跨度
  13. >
  14. >  
  15.     jQuery('document').ready(function(){                          jQuery('.historyAPI').on('click', function(e){                e.preventDefault();                var href = $(this).attr('href'); 🎜> = $(this).attr('href');                               // 取得內容                getContent(href, true);                                  jQuery('.historyAPI').removeClass('active');   
  16.             $(此)。 跨度 樣式=「寬:自動高; :無;” id=「2_nwp」>>> a 樣式="文字裝飾:無;" "文字裝飾:無;"  ="2" 目標 ="_bl🎜> ="_blank> > href="http://cpro.baidu.com/cpro/ui /uijs.php?adclass=0&app_id=0&c=新聞&cf=1001&ch =0&di=128&fv=0&is_app=0&jk=f7cb547a6e640f0a&k=add&k0=add&kdi0=0&luki=3&n=10&p=baidu&q=06011078_cc&rb=10&p=baidu” 1&stid=0&t =tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com /document/5360.html&urlid=0" id=" 2_nwl"=" 2_nwl"= >跨度 樣式="顏色:#0000ff;字體大小寬度:14px;高度:自動;浮動:無;">添加 跨度>a>
  17. span
  18. >
  19. Class('active' );   
  20.         });   
  21.              
  22.     });   
  23.          
  24.     //新增 popstate 事件監聽器來處理瀏覽器後退鈕   
  25.     window.addEventListener("popstate", function(e) {   
  26.              
  27.         // 使用 e.state 取得狀態值            getContent(location.pathname, false);        });   
  28.          
  29.     函數 getContent(url, addEntry) {   
  30.         $.get(url)   
  31.         .done(function( 跨度跨度 >「寬度:自動;高度:自動;浮動:無;」 id=「3_nwp」 >a 樣式="文字裝飾:無; > mpid="3" 目標 = "_blank" href="http://cpro.baidu.com/cpro/ui /uijs.php ?adclass=0&app_id=0&c=新聞&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=f7cb547a6e640f0a&k=data&k0=data&kdi0=0&luki=6e640f0a&k=data&k0=data&kdi0=0&luki=6&n=10&C &sid=a0f646e7a54cbf7&ssp2=1&stid=0&t =tpclicked3_hc&tu =u1922429&u=http://www.admin10000.com/document/5360.html&urlid=0" id=id= >跨度 樣式=樣式=樣式=樣式=>資料 跨度>
  32. a
  33. >
  34. 跨度
  35. 跨度
  36. 跨度
  37. 跨度 > ) {                                  //更新頁內容               $('#contentHolder').html(data);                     
  38.             if(跨度跨度 id=「4_nwp」> a 樣式="文字裝飾:無;""文字裝飾:無;""文字裝飾:無;""簡訊>mpid="4" 目標=目標= 🎜> href="http://cpro.baidu.com/cpro/ui/uijs. php?adclass=0&app_id=0&c=新聞&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=f7cb547a6e640f0a&k=add&k0=add&kdi0=0&luki=3&n=10&p=baidu&q=0601100&luki=3&n=10&p=baidu&q=06011078080078&q. 4cbf7&ssp2=1&stid=0&t=tpclicked3_hc&tu= u1922429&u=http: //www.admin10000.com/document/5360.html&urlid=0" id="4="4_nwl">跨度 樣式="顏色:0000顏色: :14px;寬度:自動;高度:自動;浮動:無;"> 跨度 跨度 跨度
  39. 跨度
  40. 跨度
  41. 跨度
  42. 跨度
  43. 跨度>
  44. a
  45. >span>span>
🎜>條目
 == true) {   


                //使用pushState新增歷史條目  

                history.pushState(null, null, url);                }                              });        }    腳本>   總結(ps:喜歡這兩個字~~~^_^~~~) HTML 5中的History API對Web應用程式有著很大的影響。為了更容易創建有效率的、對SEO友善的單頁面應用,它刪除了對雜湊值的依賴。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!