window.pushState示例

_石灰發表於2014-04-29
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>pushState</title>
</head>
<body style="width: 600px;">
     <h1>window.pushState示例</h1>
    <nav style="border: 1px solid;margin: 20px;">
        <a href="javascript:void (0);" id="h1">歷史記錄點1</a>
        <a href="javascript:;" id="h2">歷史記錄點2</a>
        <a href="javascript:;" id="h3">歷史記錄點3</a>
        <a href="javascript:;" id="h4">歷史記錄點4</a>
        <a href="javascript:;" id="h5">歷史記錄點5</a>
    </nav>
    <section style="border: 1px solid">
        <h2>正文內容</h2>
        <div id="content" style="height: 400px;overflow: hidden;font-size: 50px;text-align: center;"></div>
    </section>
</body>
      <script>
         var arr =  ['歷史記錄1','歷史記錄2','歷史記錄3','歷史記錄4','歷史記錄5'];
         var content = document.getElementById("content");
          function goTo(e){
              var target = e.target;
              var id = target.id;
              var text = target.innerHTML;
              var state = {};
              switch(id){
                  case "h1":
                      state = {currPage:"h1",title:"第一頁"};
                      history.pushState(state,"","");  //新增記錄點
                      content.innerHTML = arr[0];
                      break;
                  case "h2":
                      state = {currPage:"h2",title:"第二頁"};
                      history.pushState(state,"","")
                      content.innerHTML = arr[1];
                      break;
                  case "h3":
                      state = {currPage:"h3",title:"第三頁"};
                      history.pushState(state,"","")
                      content.innerHTML =arr[2];
                      break;
                  case "h4":
                      state = {currPage:"h4",title:"第四頁"};
                      history.pushState(state,"","")
                      content.innerHTML = arr[3];
                      break;
                  case "h5":
                      state = {currPage:"h5",title:"第五頁"};
                      history.pushState(state,"","")
                      content.innerHTML = arr[4];
                      break;
              }
          }
          function backOrForward(){ //前進或後退
              var currPage = window.history.state?window.history.state.currPage:"";
              switch(currPage){
                  case "h1":
                      content.innerHTML = arr[0];
                      break;
                  case "h2":
                      content.innerHTML = arr[1];
                      break;
                  case "h3":
                      content.innerHTML = arr[2];
                      break;
                  case "h4":
                      content.innerHTML = arr[3];
                      break;
                  case "h5":
                      content.innerHTML = arr[4];
                      break;
                  default :
                      content.innerHTML = "";
              }
          }
          document.addEventListener('click',goTo,false);      
          window.addEventListener('popstate',backOrForward,false);  //監聽popstate事件
      </script>
</html>

相關文章