History Api使用演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>History Api 使用演示</title>
</head>
<body>
<div class="wrapper">
<ul class="nav">
<li class="nav-item">
first
</li>
<li class="nav-item">
second
</li>
<li class="nav-item">
third
</li>
</ul>
<div class="content"></div>
</div>
<script>
var menu = document.querySelectorAll('ul.nav>li');
var content = document.querySelector('div.content');
function initPage (page) {
menu.forEach(function(i,k){
i.classList.remove('selected-item');
}); menu.forEach(function(i,k){
if (i.innerText.toLowerCase().trim() === page) {
i.classList.add('selected-item');
}
});
content.innerText = `this is ${page.substring(1)} page`;
} initPage(window.location.hash);
menu.forEach(function(i,k){
i.addEventListener('click', function(e) {
var page = e.target.innerText.toLowerCase().trim();
initPage(page);
// pushstate 会修改地址栏url并向历史记录添加一条记录，不会刷新页面！
window.location.hash = page;
history.pushState(null, page, window.location.hash);
});
}); /*
go back forward都会触发popstate，这个方法会修改地址栏，不刷新页面！
*/
window.addEventListener("popstate", function(e) {
initPage(window.location.hash);
});
/*
锚点的改变会触发hashchange事件，如果用锚点区分url可以监听此事件
*/
window.addEventListener('hashchange', function(e){
var hash = window.location.hash;
console.log(`hash changed to ${hash}!`);
});
</script>
</body>
</html>
History Api使用演示的更多相关文章
- HTML5 History API实现无刷新跳转
在HTML5中, 新增了通过JS在浏览器历史记录中添加项目的功能. 在不刷新页面的前提下显示改变浏览器地址栏中的URL. 添加了当用户单击浏览器的后退按钮时触发的事件. 通过以上三点,可以实现在不刷新 ...
- History API与浏览器历史堆栈管理
移动端开发在某些场景中有着特殊需求,如为了提高用户体验和加快响应速度,常常在部分工程采用SPA架构.传统的单页应用基于url的hash值进行路由,这种实现不存在兼容性问题,但是缺点也有--针对不支持o ...
- HTML5学习笔记之History API
这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美 ...
- 使用HTML5的History API
HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL.这个功能很有用,例如通过一段JavaScript代码局部加载页面的内容,你希望通过改变当前页面的 ...
- 利用HTML5的History API实现无刷新跳转页面初探
HTML4中的History API history这个东西大家应该都不陌生,我们经常使用history.back(-1)来实现后退功能,具体的属性和方法如下: 属性 length 历史的项数.Jav ...
- 大熊君学习html5系列之------History API（SPA单页应用的必备------重构完结版）
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- 大熊君学习html5系列之------History API（SPA单页应用的必备）
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- HTML5 History API 实现无刷新跳转
在HTML5中, 1. 新增了通过JS在浏览器历史记录中添加项目的功能. 2. 在不刷新页面的前提下显示改变浏览器地址栏中的URL. 3. 添加了当用户单击浏览器的后退按钮时触发的事件. 通过以上三 ...
- html5 history api
1.html5 history api适用场景,个人理解最大的用处是配合ajax使用,使ajax拥有回退.前进的用户体验. 2.代码(dive into html5中的一个小例子) 1)fer.htm ...
随机推荐
- 2019年一次java知识点总结
java基础 数据类型 集合与数据结构 关键字(static,rty ...) IO和网络 多线程(并发与锁,死锁) 异常 简单算法,复杂度 JVM 类加载 java内存模型 对象监听器字节码 垃圾回 ...
- Git开发工作流
1.1 master分支 主分支,产品的功能全部实现后,最终在master分支对外发布. 1.2 develop分支 开发分支,基于master分支克隆,产品的编码工作在此分支进行. 1.3 rele ...
- JAVA学习笔记（4）—— 排序算法
排序,就是使一串记录,按照其中的某个或某些关键字的大小,递增或递减的排列起来的操作.排序算法,就是如何使得记录按照要求排列的方法. 排序算法大体可分为两种: 一种是比较排序,时间复杂度O(nlogn) ...
- eval()和$.parseJSON()注意事项
在前后端分离大行其道XXX(巴拉巴拉的废话不多讲了).描述实际应用场景:后台组装数据,返回到前台调用. 刚开始没有注意“后台返回字符串_1”的形式,使用eval()处理. 只是返回了字符串,不是严格意 ...
- 云栖社区用机器人爬CSDN的文章？
这个云栖社区的文章https://yq.aliyun.com/ziliao/539322 这篇文章是我13年写的,不知道咋插入图片,见谅. 下面是我的文件记录 分享XAML图标的网站 原创 2013年 ...
- 如何用java实现一个p2p种子搜索(3)-dht协议实现
dht协议实现 上一篇完成了路由表的实现,建立了路由表后,我们还要对路由表进行初始化,因为一开始路由表为空,所以我们需要借助一些知名的dht网络中的节点,对这些节点进行find_node,然后一步步初 ...
- Nginx:Linux下安装Nginx与配置
准备目录 [root@sijizhen ~]# mkdir /usr/local/nginx [root@sijizhen ~]# cd /usr/local/nginx/ 下载 1.Nginx,在h ...
- [HASH]MOD运算用户哈希函数
一.概述 MOD(取模)运算配合质数的特性,可以实现一种简单的哈希算法. 二.基于的定理 在理解如何实现mod哈希前应当了解一些数学的定理: 1.x mod y = z ,实际上是x除以y的余数y的意 ...
- Java - day001 - 8种基本数据类型
一字节8电位 Java byte 最左边一位表示正负,0是正,1是负. (option / alt) + / 代码提示 Refactor 重构 Rename 重命名 (windows 重命名是选中 ...
- C语言的数组指针
数组(Array)是一系列具有相同类型的数据的集合,每一份数据叫做一个数组元素(Element).数组中的所有元素在内存中是连续排列的,整个数组占用的是一块内存.以int arr[] = { 99, ...