HTML5中historyAPI的示例分析

這篇“HTML5中history API的示例分析”文章，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要參考一下，對(duì)于“HTML5中history API的示例分析”，小編整理了以下知識(shí)點(diǎn)，請(qǐng)大家跟著小編的步伐一步一步的慢慢理解，接下來(lái)就讓我們進(jìn)入主題吧。

專注于為中小企業(yè)提供網(wǎng)站建設(shè)、網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)海城免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000+企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

html是什么

html的全稱為超文本標(biāo)記語(yǔ)言，它是一種標(biāo)記語(yǔ)言，包含了一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動(dòng)畫、聲音、表格、鏈接等，主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁(yè)。

HTML5 history API介紹

history是個(gè)全局變量，即window.history

屬性和方法如下：

length：歷史堆棧中的記錄數(shù)。

back()：返回上一頁(yè)。

foward()：前進(jìn)到下一頁(yè)。

go([delta])： delta是數(shù)字，如果為0或?yàn)榭談t刷新本頁(yè)，如果正數(shù)則前進(jìn)[delta]頁(yè)，如負(fù)數(shù)則后退[delta]頁(yè)。

HTML5添加了以下兩個(gè)方法：

pushState(data, title, [,url])：在歷史堆棧頂部插入一條記錄。

data為一個(gè)對(duì)象或null，會(huì)在window的popstate事件(window.onpopstate)時(shí)，作為state參數(shù)傳遞過去。

title為頁(yè)面的標(biāo)題，當(dāng)前所有瀏覽器都忽略這個(gè)參數(shù)。

url 為頁(yè)面url，不寫則為當(dāng)前頁(yè)。
replaceState(data, title, [,url])：更改當(dāng)前頁(yè)面的歷史記錄。這種更改不會(huì)去訪問該URL。
replaceState()的URL參數(shù)必須和當(dāng)前頁(yè)的協(xié)議（如HTTP、HTTPS）和域名完全相同（使用不同的子域都不行）
目前只有Safari 5.0+、Chrome 8.0+、Firefox 4.0+和iOS 4.2.1+支持。如果想兼容老瀏覽器的話，可以試試History.js，而且它還修正了一些bug。
pushState 與 replaceState 使用：

<?php
    $photo = isset($_GET['id'])? $_GET['id'] : 1;
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>test</title>
  <script type="text/javascript">
  function go(c){
    document.title = 'test' + c; //更改title
    window.history.pushState({'title':'test'+c, 'photo':c}, 'test'+c, 'test.php?id='+c); // 插入前一頁(yè)歷史記錄
    window.history.replaceState({'title':'test'+c, 'photo':c},'test'+c, 'test.php?id='+c);  // 更改當(dāng)前歷史記錄
    document.getElementById("photo").src = c + '.jpg';
  }
  window.onpopstate = function(obj){
    if(obj.state!=null){
        document.title = obj.state.title;  // 后退時(shí)更新title
        document.getElementById("photo").src = obj.state.photo + '.jpg';
    }
  }
  </script>
 </head>
 <body>
  <p>
      <a href="javascript:void(0)" onclick="go(1)">page 1</a>
      <a href="javascript:void(0)" onclick="go(2)">page 2</a>
      <a href="javascript:void(0)" onclick="go(3)">page 3</a>
      <a href="javascript:void(0)" onclick="go(4)">page 4</a>
  </p>
  <p><img src="<?=$photo ?>.jpg" id="photo"></p>
 </body>
</html>

window.onpopstate方法：

window.onpopstate = function(event){
    alert(event.state);
}

以上是“HTML5中history API的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前文章：HTML5中historyAPI的示例分析
文章起源：http://bm7419.com/article28/igogjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、靜態(tài)網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、云服務(wù)器、域名注冊(cè)、品牌網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容