文档章节

html5 history api 实现无刷新浏览以及历史记录管理

L
 LorinLuo
发布于 2016/02/25 15:17
字数 235
阅读 72
收藏 5
<!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"]);
})


© 著作权归作者所有

共有 人打赏支持
L
粉丝 18
博文 166
码字总数 116776
作品 0
成都
程序员
私信 提问
H5页面监听Android物理返回键

Android物理返回键的点击事件,一般webview的默认行为是 ,但是在实际需求场景下,简单的页面回退并不能满足需求,所以需要H5页面监听Android物理返回键从而自定义处理方法。 本方案的代码都...

hujiao
2018/12/11
0
0
【深入吧,HTML 5】 性能 & 集成 —— History API

博客 有更多精品文章哟。 前言 在深入了解 History API 之前,我们需要讨论一下前端路由;路由指的是通过不同 URL 展示不同页面或者内容的功能,这个概念最初是由后端提出的,因此,在传统的...

晨风明悟
02/01
0
0
AngularJS 中的友好 URL —— 移除URL 中的 #

AngularJS 默认将会使用一个 # 号来对URL进行路由. 例如: http://example.com/ http://example.com/#/about http://example.com/#/contact 要获得干净的URL并将井号从URL中移除是很容易的. 完...

oschina
2014/06/20
23.1K
17
history API 和锚点链接在单页应用页面切换中的应用

Ajax的流行和前端MVVM框架的快速发展给Web开发带来了极大的便利,也让Web应用体验越来越好,近些年单页应用也随之流行起来。Ajax的应用可以让网页实现无刷新更新数据,但其也会造成浏览器无法...

深海鱼在掘金
2018/10/30
0
0
react-router的实现原理

目前,的生态越来越丰富,像 已经被越来越多的使用,本文就的内部实现进行分析。文章主要包含两大部分: 一是对赖以依存的进行研究;二是分析是如何实现与同步的。 1. react-router依赖基础 ...

大灰狼的小绵羊哥哥
03/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot引入第三方jar包或本地jar包的处理方式

在开发过程中有时会用到maven仓库里没有的jar包或者本地的jar包,这时没办法通过pom直接引入,那么该怎么解决呢 一般有两种方法 - 第一种是将本地jar包安装在本地maven库 - 第二种是将本地j...

独钓渔
今天
2
0
五、MyBatis缓存

一、MyBatis缓存介绍 缓存的使用可以明显的加快访问数据速度,提升程序处理性能,生活和工作中,使用缓存的地方很多。在开发过程中,从前端-->后端-->数据库等都涉及到缓存。MyBatis作为数据...

yangjianzhou
今天
2
0
最近研究如何加速UI界面开发,有点感觉了

最近在开发JFinal学院的JBolt开发平台,后端没啥说的,做各种极简使用的封装,开发者上手直接使用。 JBolt开发平台包含常用的用户、角色、权限、字典、全局配置、缓存、增删改查完整模块、电...

山东-小木
今天
3
0
《月亮与六便士》的读后感作文3000字

《月亮与六便士》的读后感作文3000字: 看完英国作家威廉.萨默塞特.毛姆所著《月亮与六便士》(李继宏译),第一疑问就是全书即没提到“月亮”,也没提到“六便士”。那这书名又与内容有什么...

原创小博客
昨天
2
0
微信网页授权获取用户信息(ThinkPHP5)+ 微信发送客服消息(一)

以thinkphp5为实例,创建控制器 class Kf extends Controller { /** * [protected description]微信公众号appid * @var [type] */ protected $appid = "xxxxxxxxxxxxxxx"; /** * [protected......

半缘修道半缘君丶
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部