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. 【九阳神功】Nessus 8_VM不限IP及AWVS破解版合体部署

    Nessus 8下载地址: https://moehu-my.sharepoint.com/personal/ximcx_moebi_org/_layouts/15/download.aspx?Sou ...

  2. IP2188中文资料书

    IP2188 是一款集成 12 种.用于 USB 输出端口的快充协议 IC,支持 USB 端口充电协议.支持 11种快充协议,包括 USB TypeC PD2.0/PD3.0/PPS DFP,HVDC ...

  3. Python 中 lru_cache 的使用和实现

    在计算机软件领域,缓存(Cache)指的是将部分数据存储在内存中,以便下次能够更快地访问这些数据,这也是一个典型的用空间换时间的例子.一般用于缓存的内存空间是固定的,当有更多的数据需要缓存的时候,需要 ...

  4. 每天学一点 Vue3（一） CND方式的安装以及简单使用

    简介 感觉vue3的新特性很舒服,这样才是写软件的感觉嘛.打算用Vue实现自己的一些想法. Vue3还有几个必备库,比如Vue-Router(负责路由导航).Vuex(状态管理.组件间通信),还有第三 ...

  5. 它真正的父进程在fork出子进程后就先于子进程exit退出了，所以它是一个由init继承的孤儿进程

    [Linux编程]守护进程(daemon)详解与创建_mick_seu的博客-CSDN博客_linux daemon https://blog.csdn.net/woxiaohahaa/article ...

  6. slice 切片实现 Slice object interface

    1.Python切片对象可以为任意类型 https://github.com/python/cpython/blob/master/Include/sliceobject.h /* Slice obj ...

  7. 文件系统层次结构标准 Linux 系统目录结构

    https://zh.wikipedia.org/wiki/文件系统层次结构标准 多数Linux发行版遵从FHS标准并且声明其自身政策以维护FHS的要求. [3] [4] [5] [6] 但截至200 ...

  8. hashlib，configparser，logging

    # hash: 算法, 结果是什么? 是内存地址, # print(hash('123')) # dic = {'name':'alex'} # print(hash('name')) # print ...

  9. P5518 [MtOI2019]幽灵乐团 / 莫比乌斯反演基础练习题

    瞎扯 建议在阅读题解之前欣赏这首由普莉兹姆利巴姐妹带来的的合奏. Q:你参加省选吗?不是说好了考完 NOIP 就退吗. A:对啊. Q:那你学这玩意干啥? A:对啊,我学这玩意干啥? 写这题的动机? ...

  10. （七）整合 Redis集群 ,实现消息队列场景

    整合 Redis集群 ,实现消息队列场景 1.Redis集群简介 1.1 RedisCluster概念 2.SpringBoot整合Redis集群 2.1 核心依赖 2.2 核心配置 2.3 参数渲染 ...