html5 history api 實現無刷新瀏覽以及歷史記錄管理

時間 2019-11-11

標籤 html5 html history api 實現刷新瀏覽以及歷史記錄管理欄目 HTML5 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="UTF-8">
   <title></title>
   <style>
      body, html, ul, li, dl, dt, dd {
         padding: 0px;
         margin: 0px;
      }
      nav {
         width: 100px;
         display: block;
         float: left;
         background-color: #c3c3c3;
      }
      nav ul {
         list-style-type: none;
         overflow: hidden;
      }
      nav li {
         padding: 0px 6px;
         font-size: 20px;
         margin-bottom: 10px;
      }
      nav li:first-child {
         margin-top: 10px;
      }
      nav li a {
         text-decoration: none;
      }
      article {
         display: block;
         margin-left: 100px;
         padding: 10px;
         background-color: #ffffff;
      }
   </style>
</head>
<body>
<aside>
   <nav>
      <ul>
         <li><a href="/home">home</a></li>
         <li><a href="/about">about</a></li>
         <li><a href="/photos">photos</a></li>
      </ul>
   </nav>
</aside>
<article>
   <dl>
      <dt>title:</dt>
      <dd class="title"></dd>
      <dt>url:</dt>
      <dd class="url"></dd>
      <dt class="description">description:</dt>
      <dd></dd>
   </dl>
</article>

<script src="lib/jquery-1.11.2.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>

$(document).ready(function () {
   function update (info) {
      $(".title").html(info.title);
      $(".url").html(info.url);
      $(".description").html(info.description);
   }
   var stateObj = {
      home: {
         title: "home",
         url: "/home",
         description: "this is home page"
      },
      about: {
         title: "about",
         url: "/about",
         description: "this is about page"
      },
      photos: {
         title: "photos",
         url: "/photos",
         description: "this is photos page"
      }
   }

   $("nav").on("click", "a", {}, function (event) {
      var state = event.target.getAttribute("href").replace(/\//, "");
      event.preventDefault();
      history.pushState(stateObj[state], "", event.target.href);
      update(stateObj[state]);
   })

   window.addEventListener("popstate", function () {
      var state = history.state;

      update(state);
   });

   history.pushState(stateObj["home"], "", "/home");
   update(stateObj["home"]);
})

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。