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 ...
随机推荐
- Jmeter、Postman 、 loadrunner SoapUI 接口测试工具
一. loadrunner 简称 LR 二. Jmeter 1.安装包:apache-jmeter-4.0.tgz 解压.学会此工具的使用 和POSTman 一样的. 2.本机测试:双击apa ...
- Python文本编辑器推荐
首推当然是Sublime Text:可以中文化,百度上面有教程,页面比较酷炫,功能也不错 然后就是Notepad++,台湾开发,有中文界面
- 20175333曹雅坤MyCP（课下作业，必做）
MyCP(课下作业,必做) 要求 编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能,要求MyCP支持两个参数: java MyCP -tx XXX1.txt XXX2.bin ...
- ABP core学习之一 使用Mysql数据库
修改项目EntityFrameworkCore的相关内容 1.添加类库 使用nuget包管理器,添加Pomelo.EntityFrameworkCore.MySql 2.TradeErpDbConte ...
- 记录一个nginx的配置
rt #user xiaoju; worker_processes ; #error_log logs/error.log notice; #error_log logs/error.log debu ...
- java基础知识三 流
Java 流(Stream).文件(File)和IOJava.io 包几乎包含了所有操作输入.输出需要的类.所有这些流类代表了输入源和输出目标. Java.io 包中的流支持很多种格式,比如:基本类型 ...
- Eclipse：An error has occurred. See error log for more details. java.lang.NullPointerException
问题描述 在使用 Eclipse Clean 项目时报错:An error has occurred. See error log for more details. java.lang.Null ...
- 简单使用zabbix监控nginx是否存活
1.在agent端修改主配置文件 vim /etc/zabbix/zabbix_agentd.conf ........ ........ UserParameter=nginx.status[*], ...
- asp.net core 自定义中间件
官方文档:https://docs.microsoft.com/zh-cn/aspnet/core/fundamentals/middleware/?view=aspnetcore-2.1 中间件的定 ...
- Git 的使用(皮毛))
1.安装git 软件(下一步直到完成) 2.码云注册(保存代码) 3.创建代码托管仓库 4.创建文件夹 5.写东西并提交到码云 1.在某个文件夹下写东西 2.写完之后在此文件夹下鼠标右键,并选择[gi ...