锚接口(下)——html5的history api
概述
虽然html5的history api是H5专门用来解决记录历史记录和单页面的方法,但是很多老式的浏览器并不支持它,所以一般遇到老式的浏览器会做一个polyfill使用之前的hashchange方法。
另一方面,html5的history api在实际使用的时候会和之前的hashchange方法的用法有稍微的不同。
说明
- 主要使用history.pushState改变url,它的调用格式是
history.pushState(data, title, path);
,其中data是一个自己定义的数据对象,title是标题,现在大部分浏览器还不支持,path是路径。 - 用这个方法改变url的时候,页面并不刷新。
- 用这个方法改变url的时候,并不会触发onpopstate事件,只有在使用history.go或者history.back等方法的时候才会触发onpopstate事件,比如说浏览器按倒退键。(这一点和hashchange方法不同)
- 触发onpopstate事件的时候可以用event.state获得data这个对象。
解决方案
SPA怎么路由
具体和hashchange方法类似,唯一不同的地方是,在用history.pushState改变url的时候,由于不会触发onpopstate事件,所以一些函数要放在history.pushState改变url之后处理(以前是直接由hashchange事件处理)。
复制url并在另一个页面打开
如果是用#符号的话,那么方法类似hashchange。
但是新的history api可以摒弃#字符,比如说react-router里面就是这么做的,具体怎么解决我还没有弄清楚。
例子
下面是我编写的一段测试代码供大家参考。直接复制并存为html文件,然后在服务器上打开即可。(因为history api需要一个域名,可以是locahost)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
//hashchange事件,如果有hash值,则输出到oDiv。
function onPopstate(event) {
if(history.state) {
console.log(history.state.next);
}
if(history.state && history.state.next === 1){
$('#div1').hide();
$('#div2').show();
$('#div3').hide();
} else if(history.state && history.state.next === 2) {
$('#div1').hide();
$('#div2').hide();
$('#div3').show();
} else {
$('#div1').show();
$('#div2').hide();
$('#div3').hide();
}
}
//页面加载
window.onload=function (){
//加载时触发一次hashchange事件
$(window)
.bind( 'popstate', onPopstate )
.trigger( 'popstate' );
//点击事件,把数组装在hash里面
document.getElementById("input1").onclick=function(){
history.pushState({next: 1}, null, 'next1.html');
$('#div1').hide();
$('#div2').show();
$('#div3').hide();
};
document.getElementById("input2").onclick=function(){
history.pushState({next: 2}, null, 'next2.html');
$('#div1').hide();
$('#div2').hide();
$('#div3').show();
};
document.getElementById("input3").onclick=function(){
history.pushState('', null, 'index.html');
$('#div1').show();
$('#div2').hide();
$('#div3').hide();
};
}
</script>
</head>
<body>
主页=模块1,模块2页=模块2,模块3页=模块3
<input type="button" value="去模块2页" id="input1" />
<input type="button" value="去模块3页" id="input2" />
<input type="button" value="去主页" id="input3" />
<div id="div1">模块111111111111111111</div>
<div id="div2">模块222222222222222222</div>
<div id="div3">模块333333333333333333</div>
</body>
</html>
其它
- 单页面路由实际上和我的demo不一样,不太运用history.pushState里面的data参数,而是直接分析url做正则匹配,不过这个data参数在别的地方有很大用处。
- 一般的路由和我的demo里面不一样,不是用按钮而是用a链接,那个时候直接在click的时候阻止默认跳转即可。
- history.pushState里面的data参数储存在sessionStorage里面。
锚接口(下)——html5的history api的更多相关文章
- 使用HTML5的History API
HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL.这个功能很有用,例如通过一段JavaScript代码局部加载页面的内容,你希望通过改变当前页面的 ...
- 利用HTML5的History API实现无刷新跳转页面初探
HTML4中的History API history这个东西大家应该都不陌生,我们经常使用history.back(-1)来实现后退功能,具体的属性和方法如下: 属性 length 历史的项数.Jav ...
- 有关html5的history api
从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残按到了F5.然后,页面刷新了,评论又回到了第一页 ...
- 锚接口(上)——hashchange api 和 $.uriAnchor
概述 这是我在单页Web应用这本书上看到的方法,并深入的研究了一下,把结果记录在下面,供以后开发时参考,相信对其它人也有用. 说明一下,这个方法已经过时了,H5有更新的方法:history api,我 ...
- Html5 history Api简介
一. Html4的History API back() 后退,跟按下“后退”键是等效的. forward() 前进,跟按下“前进”键是等效的. go() 用法:history.go(x):在历史的范围 ...
- HTML5 History API让ajax能回退到上一页
HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL.这个功能很有用,例如通过一段JavaScript代码局部加载页面的内容,你希望通过改变当前页面的 ...
- window.history的跳转实质-HTML5 history API 解析
在上一浏览器跳转行为的测试中,我们看到了通过不同的方法操作浏览器跳转时,它的刷新表现有所不同,在这一文章中,将看看,为何会产生这样的不同?其背后的实质是什么?浏览器的访问历史记录到底是如何运作的呢? ...
- 林大妈的JavaScript进阶知识(三):HTML5 History API
HTML5中新增了History API,它用于管理浏览器路由跳转的一个url栈.History是window对象的一部分,它也是一个对象,因此称它是BOM(类似DOM,Browser Object ...
- 学习HTML5 history API
html5 在 history 对象上添加几个新的方法.事件.属性,用以增强开发者对于浏览器历史记录的控制.大体上说,新的API可以帮助我们在无刷新的情况下改变浏览器的url,新增或者替换之前的历史记 ...
随机推荐
- proposal-cancelable-promises
fetch 从来就没行过,最大的优势就是"新标准",但是 proposal-cancelable-promises 被 withdrawn,就导致了 fetch 发起的请求不可能被 ...
- Java6及以上版本对synchronized的优化
目录 1.概述 2.实现同步的基础 3.实现方式 4.Java对象头(存储锁类型) 5.优化后synchronized锁的分类 6.锁的升级(进化) 6-1.偏向锁 6-2.轻量级锁 6-3.锁的比较 ...
- 机器学习linux系统环境安装
机器学习linux系统环境安装 安装镜像下载 可以自己去ubuntu官方网站按照提示下载amd64的desktop版本 或者考虑到国内镜像站点下载,如tuna,163, ali等 课程使用最新的17. ...
- Install_WordPress_In_CentOS_7
1 – Install Apache Http Server# yum install httpd.x86_64 2 – Install php# yum install php.x86_64 3 – ...
- HDU-1078.FatMouseandCheese(线性dp + dfs)
本题大意:在一个n * n的迷宫内进行移动,左上角为初始位置,每次可以走的步数不能超过m,并且每次走的方格上面的数字要大于前一次走的放个数字,不能走到格子外面,问如何能使得到的数字和最大. 本题思路: ...
- FortiGate下用户访问特定网址不通
1.现状: 如图,上网行为管理和防火墙控制用户的数据访问,到外网的出口链路有2条:联通的和电信的,其中联通的优先级较高. 2.现象: 用户访问www.xxxxbbs.com不通 3.分析 在上网行为管 ...
- webapi 重复提交问题
https://izen.live/Blog/info/13.html /// <summary> /// action方法过滤器 /// </summary> public ...
- Error while executing: am start -n
单纯clean project是不行的,选择File-Invalidate Caches/Restart,清除缓存,重启AS Android NDK 是在SDK前面又加上了"原生" ...
- 如何通过RNA-Seq了解转录本的结构
[转载]如何通过RNA-Seq了解转录本的结构 已有 1942 次阅读 2014-12-26 15:22 |个人分类:转录组测序|系统分类:科研笔记|关键词:RNA-Seq,转录组测序,转录本结构| ...
- HDU2028
#include <bits/stdc++.h> using namespace std; ; int gcd(int a, int b) { ? b:gcd(b, a%b); } int ...