一篇文章图文并茂地带你轻松实践 HTML5 history api
HTML5 history api
前言
由于笔者在网络上没有找到比较好的关于 history api 的实践案例，有的案例过于杂乱，没有重点，有些案例只是告诉读者 api 是什么，却没告诉怎么用，本文章从零开始带读者实践 history api ，建议和笔者一起写一遍。
效果
注意 url 变化，另外用到了 虎裤里老师 和 狼大老师 的图，侵权马上删。
流程
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>
css部分
.row {
display: flex;
justify-content: space-around;
}
.image {
width: 25%;
height: 25%;
padding: 20px;
cursor: pointer;
}
- 等待页面
dom加载完毕再执行JS
window.onload = () => {
// ...
}
获取
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", () => {
// ...
});
});
模拟网络请求
接上方的代码，这里的话我写了一份模拟数据
{
"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
- 根据获得的
url进行展示
const image = document.querySelector(".image");
const displayContent = (src) => {
image.setAttribute("src", src);
};
- 页面变化后，利用
html5 history api进行修改页面地址，并传入state
history.pushState(state, null, dataName);
其中第一个参数后面有个监听事件会用到，而第二个参数代表标题，没必要传，第三个参数是路径。
如果当前路径是 /history 则如果传入的路径是 cow 则会变成 /history/cow
经过上面的几个步骤，已经成功完成了利用按钮切换界面的时候，展示不同的图片信息。
这个时候，如果点击返回或者页面的前进按钮，跳转到上一页或下一页，是无法显示网页信息的。
- 前进后退显示网页信息
window.addEventListener("popstate", (e) => {
const { state } = e;
if (state) displayContent(state);
});
这里的 state 就是前面 pushState 传的 state，可以根据这个 state 渲染当前界面，这就保证了在前进后退的时候渲染对应的图像。
这个时候当我们点击前进和后退的时候，基本是已经可以展示对应的界面的，这样非常好，但是仍然有个问题，当后退到第一个界面的时候，没有数据
- 替换第一个界面的数据
history.replaceState("./images/虎虎.jpg", null, location.href);
image.setAttribute("src", "./images/虎虎.jpg");
这里的话，把第一个界面的数据补充上，其实一般都是经过网络请求的，这里省略了。现在还存在一个问题，如果跳到某个界面后，刷新，可能会出现获取不到资源的情况。
这很正常，例如我们在 /history 下有一个 index.html 文件，那么访问 /history 是可以直接访问到这个文件的，但是当我们通过上述方法跳转路由的时候 /history/cow 并不存在 index.html 文件，这意味刷新界面后获取不到对应的资源了，这个时候上线后还需要 nginx 的辅助配置
- 通过
nginx的urlrewrite配置，使得总是命中history/
总结
不知道大家有没有用过之前的 vue router 里面如果开启了 mode: history 的话，最后还要通过 nginx 进行辅助配置，可能就是这个原理。
一篇文章图文并茂地带你轻松实践 HTML5 history api的更多相关文章
- 一篇文章图文并茂地带你轻松学会 HTML5 storage
html5 storage api localStorage 和 sessionStorage 是 html5 新增的用来存储数据的对象,他们让我们可以以键值对的形式存储信息. 为什么要有 stora ...
- 一篇文章图文并茂地带你轻松学完 JavaScript 设计模式(一)
JavaScript 设计模式(一) 本文需要读者至少拥有基础的 ES6 知识,包括 Proxy, Reflect 以及 Generator 函数等. 至于这次为什么分了两篇文章,有损传统以及标题的正 ...
- 一篇文章图文并茂地带你轻松学完 JavaScript 设计模式(二)
JavaScript 设计模式(二) 本篇文章是 JavaScript 设计模式的第二篇文章,如果没有看过我上篇文章的读者,可以先看完 上篇文章 后再看这篇文章,当然两篇文章并没有过多的依赖性. 5. ...
- 一篇文章图文并茂地带你轻松学完 JavaScript 事件循环机制(event loop)
JavaScript 事件循环机制 (event loop) 本篇文章已经默认你有了基础的 ES6 和 javascript语法 知识. 本篇文章比较细致,如果已经对同步异步,单线程等概念比较熟悉的读 ...
- 一篇文章图文并茂地带你轻松学完 JavaScript 继承
JavaScript 继承 在阅读本文章之前,已经默认你了解了基础的 JavaScript 语法知识,基础的 ES6 语法知识 . 继承种类 简单的继承种类可以分为 构造函数继承 原型链继承 clas ...
- 一篇文章图文并茂地带你轻松学完 JavaScript 原型和原型链
JavaScript 原型和原型链 在阅读本文章之前,已经默认你了解了基础的 JavaScript 语法知识,基础的 ES6 语法知识 . 本篇文章旨在为 JavaScript继承 打下基础 原型 在 ...
- 一篇文章图文并茂地带你轻松学完 JavaScript 闭包
JavaScript 闭包 为了更好地理解 JavaScript 闭包,笔者将先从 JavaScript 执行上下文以及 JavaScript 作用域开始写起,如果读者对这方面已经了解了,可以直接跳过 ...
- 一篇文章搞定百度OCR图片文字识别API
一篇文章搞定百度OCR图片文字识别API https://www.jianshu.com/p/7905d3b12104
- HTML5 history API实践
一.history API知识点总结 在HTML4中,我们已经可以使用window.history对象来控制历史记录的跳转,可以使用的方法包括: history.forward();//在历史记录中前 ...
随机推荐
- 【开源】我和 JAP（JA Plus） 的故事
JA Plus 故事 程序员的故事如此简单之绕不过去的开源情结 我们准备做一件伟大的事,也可以说是一件真真正正普惠的事. 絮 是的,你没有看错,就是"絮"而非"序&quo ...
- 使用.net中的API网关模式封装微服务
在本文中,我们将了解如何使用API网关模式来封装微服务并抽象出底层实现细节,从而允许使用者拥有进入我们系统的一致入口点. 为了构建和测试我们的应用程序,我们需要: 1.Visual Studio 20 ...
- Vijos-P1103题解【线段树】
本文为原创,转载请注明:http://www.cnblogs.com/kylewilson/ 题目出处: https://www.vijos.org/p/1103 题目描述: 一条马路从数轴0到L,每 ...
- 干电池升压5V，功耗10uA
PW5100干电池升压5V芯片 输出电容: 所以为了减小输出的纹波,需要比较大的输出电容值.但是输出电容过大,就会使得系统的 反应时间过慢,成本也会增加.所以建议使用一个 22uF 的电容,或者两个 ...
- 两节锂电池充电芯片，和保护IC的接法
1.两节锂电池的充电电路:可以分为三种方式. 第一种,USB口的5V输入,使用一颗SOT23-6的升压IC,直接升压到8.4V.电流在1A以下.优点是成本最低,缺点是,没有锂电池充电控制逻辑,和锂电池 ...
- tail -f 在对文件进行动态追踪时失效的问题
在我是用 tail -f file.txt 对这个文件进行动态追踪时: 我重新打开一个新的终端进行vim编辑这个文件并且保存 这是我们发现,tail -f file.txt'动态追踪的这个文件没有任何 ...
- 【Soul源码探秘】插件链实现
引言 插件是 Soul 的灵魂. Soul 使用了插件化设计思想,实现了插件的热插拔,且极易扩展.内置丰富的插件支持,鉴权,限流,熔断,防火墙等等. Soul 是如何实现插件化设计的呢? 一切还得从插 ...
- Mybatis总结(一)
Mybatis总结(一) 一.Mybatis启动流程(代码层面) 关于config.xml <?xml version="1.0" encoding="UTF-8& ...
- pywin32 pywin32 docx文档转html页面 word doc docx 提取文字 图片 html 结构
https://blog.csdn.net/X21214054/article/details/78873338# python docx文档转html页面 - 程序猿tx - 博客园 https:/ ...
- List对象集合根据组合属性进行差集运算
背景 当List是一个基本数据类型的集合的时候,进行集合运算还比较方便,但是有这么一些业务场景,比如某个用户权限变化的列表,或者取数据的变化结果,当时有时候用笨方法多循环两次也是可以的,只不过代码 ...