HTML5 history api

前言

由于笔者在网络上没有找到比较好的关于 history api 的实践案例，有的案例过于杂乱，没有重点，有些案例只是告诉读者 api 是什么，却没告诉怎么用，本文章从零开始带读者实践 history api ，建议和笔者一起写一遍。

效果

注意 url 变化，另外用到了 虎裤里老师 和 狼大老师 的图，侵权马上删。

流程

  1. html 部分

    需要引入 jquery

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="./index.css" />

    <script src="./jquery.js"></script>

    <script src="./index.js"></script>

    <title>history html5</title>

  </head>

  <body>

    <div class="row">

      <button data-id="1" data-name="tiger" class="btn">来一只虎虎</button>

      <button data-id="0" data-name="cow" class="btn">来一只牛牛</button>

    </div>

    <div class="row">

      <img class="image" />

    </div>

  </body>

</html>
  1. css 部分
.row {

  display: flex;

  justify-content: space-around;

}

.image {

  width: 25%;

  height: 25%;

  padding: 20px;

  cursor: pointer;

}
  1. 等待页面 dom 加载完毕再执行 JS
window.onload = () => {

 	// ...

}

  1. 获取 btn 添加事件

    获取请求所需的 id 以及界面需要展示的 url 路径

  const btns = document.querySelectorAll(".btn");

  btns.forEach(btn => {

    const dataId = btn.getAttribute("data-id");		// 请求 id

    const dataName = btn.getAttribute("data-name");	// 页面 url 路径

    btn.addEventListener("click", () => {

      // ...

    });

  });

  1. 模拟网络请求

    接上方的代码，这里的话我写了一份模拟数据

{

  "images": [

    "./images/牛牛.jpg",

    "./images/虎虎.jpg"

  ]

}

​ 并在对应文件夹下存放了图片，接下来进行 ajax 网络请求

btn.addEventListener("click", () => {

      $.ajax({

        url: "./mock/mock.json",

        success: (res) => {

          const { images } = res;

          const state = images[dataId];

          displayContent(state);					// 接下来会提到这个函数

          history.pushState(state, null, dataName);	  // 接下来会提到这个函数

        },

      });

    });

​ 这里的话，一般来说是传入 id 给服务端返回一个图片的 url 由于为了实现简单，全部返回后，根据先前从 dom 属性上获得的 dataId 获取图片的 url

  1. 根据获得的 url 进行展示
const image = document.querySelector(".image");

const displayContent = (src) => {

    image.setAttribute("src", src);

 };
  1. 页面变化后，利用 html5 history api 进行修改页面地址，并传入 state
history.pushState(state, null, dataName);

其中第一个参数后面有个监听事件会用到，而第二个参数代表标题，没必要传，第三个参数是路径。

如果当前路径是 /history 则如果传入的路径是 cow 则会变成 /history/cow

经过上面的几个步骤，已经成功完成了利用按钮切换界面的时候，展示不同的图片信息。

这个时候，如果点击返回或者页面的前进按钮，跳转到上一页或下一页，是无法显示网页信息的。

  1. 前进后退显示网页信息
window.addEventListener("popstate", (e) => {

    const { state } = e;

    if (state) displayContent(state);

});

这里的 state 就是前面 pushState 传的 state，可以根据这个 state 渲染当前界面，这就保证了在前进后退的时候渲染对应的图像。

这个时候当我们点击前进和后退的时候，基本是已经可以展示对应的界面的，这样非常好，但是仍然有个问题，当后退到第一个界面的时候，没有数据

  1. 替换第一个界面的数据
 history.replaceState("./images/虎虎.jpg", null, location.href);

 image.setAttribute("src", "./images/虎虎.jpg");

这里的话，把第一个界面的数据补充上，其实一般都是经过网络请求的，这里省略了。现在还存在一个问题，如果跳到某个界面后，刷新，可能会出现获取不到资源的情况。

这很正常，例如我们在 /history 下有一个 index.html 文件，那么访问 /history 是可以直接访问到这个文件的，但是当我们通过上述方法跳转路由的时候 /history/cow 并不存在 index.html 文件，这意味刷新界面后获取不到对应的资源了，这个时候上线后还需要 nginx 的辅助配置

  1. 通过 nginx 的 url rewrite 配置，使得总是命中 history/

总结

不知道大家有没有用过之前的 vue router 里面如果开启了 mode: history 的话，最后还要通过 nginx 进行辅助配置，可能就是这个原理。

一篇文章图文并茂地带你轻松实践 HTML5 history api的更多相关文章

  1. 一篇文章图文并茂地带你轻松学会 HTML5 storage

    html5 storage api localStorage 和 sessionStorage 是 html5 新增的用来存储数据的对象,他们让我们可以以键值对的形式存储信息. 为什么要有 stora ...

  2. 一篇文章图文并茂地带你轻松学完 JavaScript 设计模式(一)

    JavaScript 设计模式(一) 本文需要读者至少拥有基础的 ES6 知识,包括 Proxy, Reflect 以及 Generator 函数等. 至于这次为什么分了两篇文章,有损传统以及标题的正 ...

  3. 一篇文章图文并茂地带你轻松学完 JavaScript 设计模式(二)

    JavaScript 设计模式(二) 本篇文章是 JavaScript 设计模式的第二篇文章,如果没有看过我上篇文章的读者,可以先看完 上篇文章 后再看这篇文章,当然两篇文章并没有过多的依赖性. 5. ...

  4. 一篇文章图文并茂地带你轻松学完 JavaScript 事件循环机制(event loop)

    JavaScript 事件循环机制 (event loop) 本篇文章已经默认你有了基础的 ES6 和 javascript语法 知识. 本篇文章比较细致,如果已经对同步异步,单线程等概念比较熟悉的读 ...

  5. 一篇文章图文并茂地带你轻松学完 JavaScript 继承

    JavaScript 继承 在阅读本文章之前,已经默认你了解了基础的 JavaScript 语法知识,基础的 ES6 语法知识 . 继承种类 简单的继承种类可以分为 构造函数继承 原型链继承 clas ...

  6. 一篇文章图文并茂地带你轻松学完 JavaScript 原型和原型链

    JavaScript 原型和原型链 在阅读本文章之前,已经默认你了解了基础的 JavaScript 语法知识,基础的 ES6 语法知识 . 本篇文章旨在为 JavaScript继承 打下基础 原型 在 ...

  7. 一篇文章图文并茂地带你轻松学完 JavaScript 闭包

    JavaScript 闭包 为了更好地理解 JavaScript 闭包,笔者将先从 JavaScript 执行上下文以及 JavaScript 作用域开始写起,如果读者对这方面已经了解了,可以直接跳过 ...

  8. 一篇文章搞定百度OCR图片文字识别API

    一篇文章搞定百度OCR图片文字识别API https://www.jianshu.com/p/7905d3b12104

  9. HTML5 history API实践

    一.history API知识点总结 在HTML4中,我们已经可以使用window.history对象来控制历史记录的跳转,可以使用的方法包括: history.forward();//在历史记录中前 ...

随机推荐

  1. Job for docker.service failed because start of the service was attempted too often. See "systemctl status docker.service" and "journalctl -xe" for details. To force a start use "systemctl reset-failed

    安装docker时,自己添加了国内的hub.docker.com镜像 [root@ce-docker ~]# systemctl restart docker 出现以下报错:Job for docke ...

  2. day128:MySQL进阶:

    目录 1.介绍和安装 2.基础管理 2.1 用户管理 2.2 权限管理 2.3 连接管理 2.4 配置管理 3.MySQL的体系结构 4.SQL 5.索引和执行计划 1.介绍和安装 1.1 数据库分类 ...

  3. 开发中的你的Git提交规范吗？

    1. 前言 目前大部分公司都在使用Git作为版本控制,每个程序员每天都要进行代码的提交.很多开发者也包括我自己,有时候赶时间或者图省事,就这么提交: git commit -m "修改bug ...

  4. python-列表包字典-根据字典的某一个键的值来进行排序

    python-列表包字典-根据字典的某一个键的值来进行排序 列表包字典的数据结构 要实现按照字典中的某一个键所对应的值进行排序 有两种办法 方法一,使用列表的sort方法 由小到大排 列表.sort( ...

  5. Py数据类型—列表，字典，元组

    列表:数据类型list. 写法li=[1,12,9,"sdsad",["ad","dd"] ].用中括号括起来,用逗号分割每个元素列表中元素 ...

  6. ES 2021 来了，详细解读5个新特性，附案例

    ES 2021是世界上最受欢迎的编程语言的最新版本〜 本次迭代中包含了五个新特性,让我们来一睹为快. 1.全部替换replaceAll: js默认的replace 方法仅替换字符串中一个模式的第一个实 ...

  7. Service Mesh 在百度网盘数万后端的落地实践

    https://www.infoq.cn/article/vpa6aypkizuqiijzflih

  8. Java通过openOffice实现word,excel，ppt转成pdf实现在线预览

    Java通过openOffice实现word,excel,ppt转成pdf实现在线预览 一.OpenOffice 1.1 下载地址 1.2 JodConverter 1.3 新建实体类PDFDemo ...

  9. Cisco交换机管理员配置

    conf tservice timestamps debug datetime msec localtime yearservice timestamps log datetime msec loca ...

  10. HTML之form表单标签的学习

    from表单 表示 <form>form表单域</form> 作用 收集并替提交用户数据给指定服务器 属性 action:收集的数据的提交地址(也就是URL) method:收 ...