摘要:另外该事件只针对同一个文档,如果浏览历史的切换,导致加载不同的文档,该事件不会被触发使用的时候,可以为事件指定回调函数或者回调函数的参数是一个事件对象,它的属性指向和方法为当前所提供的状态对象即这两个方法的第一个参数。
一、history
window.history(可直接写成history)指向History对象,它表示当前窗口的浏览历史。
History对象保存了当前窗口访问过的所有页面网址
1. length
history.length属性保存着历史记录的url数量,初始时该值为1,如果当前窗口先后访问了三个网址,那么history对象就包括3项,history.length=3
2.跳转方法:允许在浏览器历史之间移动
go() 接受一个整数为参数,移动到该整数指定的页面,比如history.go(1)相当于history.forward(),history.go(-1)相当于history.back(),history.go(0)相当于刷新当前页面 back() 移动到上一个访问页面,等同于浏览器的后退键,常见的返回上一页就可以用back(),是从浏览器缓存中加载,而不是重新要求服务器发送新的网页 forward() 移动到下一个访问页面,等同于浏览器的前进键 如果移动的位置超出了访问历史的边界,以上三个方法并不报错,而是默默的失败
3.history.pushState()
在浏览器历史中添加记录
if(!!(window.hostory && history.pushState)) { // 支持History API } else { // 不支持 } 以上代码可以用来检查当前浏览器是否支持History API。如果不支持的话可以考虑使用Polyfill库History.js
history.pushstate()方法接受三个参数,以此为:
state: 一个与指定网址相关的状态对象,popState事件触发时,该对象会传入回调函数,如果不需要这个对象,此处可填null title: 新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填null url: 新的网址,必须与当前页面处在同一个域,浏览器的地址栏将显示这个网址
假定当前网址是example.com/1.html,我们使用pushState方法在浏览记录(history对象)中添加一个记录
var stateObj = {foo:"bar"}; history.pushState(stateObj,"page 2","2.html")
添加上边这个新纪录后,浏览器地址栏立刻显示example.com/2.html,但不会跳转到2.html,甚至也不会检查2.html是否存在,它只是成为浏览历史中的新纪录。这时,你在地址栏输入一个新的地址,然后点击了后退按钮,页面的url将显示2.html;你再点击以此后退按钮,url将显示1.html
总之,pushState方法不会触发页面刷新,只是导致了history对象发生变化,地址栏会有反应。
如果pushState的url参数,设置了一个新的锚点值(即hash),并不会触发hashChange事件,如果设置了一个跨域网址,则会报错。
//报错 history.pushState(null,null,"https://twitter.com/hello")
上边代码中,pushState()想要插入一个跨域的网址,导致报错,这样设计的目的是防止恶意代码让用户以为他们是在另一个网站上
4. history.replaceState()
history.replaceState()方法的参数和pushState()方法一摸一样,区别是它修改浏览器历史当中的记录
假定当前页面是example.com/example.html
history.pushState({page:1},"title 1","?page=1") history.pushState({page:2},"title 2","?page=2") history.replaceState({page:3},"title 3","?page=3") history.back() //url显示为example.com/example.html?page=1 history.back() //url显示为example.com/example.html history.go(2) //url显示为example.com/example.html?page=3
5. history.state属性
history.state返回当前页面的state对象
history.pushState({page:1},"title 1","?page=1") history.state //{page:1}
5. popState 事件
每当同一个文档的浏览历史(即history)出现变化时,就会触发popState事件
需要注意:仅仅调用pushState方法或replaceState方法,并不会触发该事件,只有用户点击浏览器后退和前进按钮时,或者使用js调用back、forward、go方法时才会触发。另外该事件只针对同一个文档,如果浏览历史的切换,导致加载不同的文档,该事件不会被触发
使用的时候,可以为popState事件指定回调函数
window.onpopstate = function (event) { console.log("location: " + document.location); console.log("state: " +JSON.stringify(event.state)); }; // 或者 window.addEventListener("popstate", function(event) { console.log("location: " + document.location); console.log("state: " + JSON.stringify(event.state)); });
回调函数的参数是一个event事件对象,它的state属性指向pushState和replaceState方法为当前url所提供的状态对象(即这两个方法的第一个参数)。上边代码中的event.state就是通过pushState和replaceState方法为当前url绑定的state对象
这个state也可以直接通过history对象读取
history.state
注意:页面第一次加载的时候,浏览器不会触发popState事件
6.history.scrollRestoration
history.scrollRestoration = "manual";关闭浏览器自动滚动行为
history.scrollRestoration = "auto";打开浏览器自动滚动行为(默认)
二、hash
hash 就是指 url 尾巴后的 # 号以及后面的字符。这里的 # 和 css 里的 # 是一个意思。hash 也 称作 锚点,本身是用来做页面定位的,她可以使对应 id 的元素显示在可视区域内。
通过window.location.hash获取hash值
延伸: window.location对象里面 hash : 设置或返回从 (#) 开始的 URL(锚)。 host : 设置或返回主机名和当前 URL 的端口号。 hostname:设置或返回当前 URL 的主机名。 href : 设置或返回完整的 URL。 pathname: 设置或返回当前 URL 的路径部分。 port:设置或返回当前 URL 的端口号。 search : 设置或返回从问号 (?) 开始的 URL(查询部分)。 assign() : 加载新的文档。 reload() : 重新加载当前文档。 replace() : 用新的文档替换当前文档。
hash主要是一个事件:hashchange,当hash值改变时会触发这个事件
语法:window.onhashchange = fun
或者:
window.addEventListener("hashchange",fun,false)
例子:
if("onhashchange" in window) { alert("该浏览器支持 hashchange 事件!"); } function locationHashChanged() { if (location.hash === "#somecoolfeature") { somecoolfeature(); } } window.onhashchange = locationHashChanged;
hashchange事件有两个属性:
newURL: string类型,当前页面新的url oldURL: string类型,当前页面旧的url window.addEventListener("hashchange", function (e) { console.log(e.newURL,e.oldURL) var str = e.newURL.split("#")[1] document.getElementById("num").innerHTML = str.split("=")[1] })
三、vue-router中history和hash两种模式的区别
在vue的路由配置中有mode选项 最直观的区别就是在url中hash带了一个很丑的#,而history是没有#的
mode:"hash", mode:"history"
hash和history模式的不同
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/104478.html
摘要:如何实现前端路由要实现前端路由,需要解决两个核心如何改变却不引起页面刷新如何检测变化了下面分别使用和两种实现方式回答上面的两个核心问题。 原文链接:github.com/whinc/blog/… 在单页应用如此流行的今天,曾经令人惊叹的前端路由已经成为各大框架的基础标配,每个框架都提供了强大的路由功能,导致路由实现变的复杂。想要搞懂路由内部实现还是有些困难的,但是如果只想了解路由实现基本...
摘要:该手册是基于和使用教程学习编写而成,可能会有描述不够清楚的地方,大家可自行参考原文,为提供了一个完整的路由库,它允许你通过的变化来控制组件的切换与变化有关全家桶的其余相关文章,可以查看以下链接,会持续更新别眨眼看安装使用进行安装之后 该手册是基于react-router 和 React Router 使用教程 学习编写而成,可能会有描述不够清楚的地方,大家可自行参考原文, React ...
摘要:摘要以下总结的跨文档通信方法,均是在服务器不参与的情况下服务端无需特殊的代码实现的这里的通信,是指页面向页面传递信息大致分为以下三类通过实现双向通信通过客户端存储实现通信在页面跳转的过程中携带信息中其中第一种方法没有跨域的限制,且实现的是双 摘要 以下总结的跨文档通信方法,均是在服务器不参与的情况下(服务端无需特殊的代码)实现的 这里的通信,是指页面A向页面B传递信息 大致分为以下三类...
摘要:单页应用的原理从早起的根据的变化,到根据的的变化,实现无刷新条件下的页面重新渲染。那么在单页应用中是如何监听的变化呢,本文将总结一下,如何在单页页面中优雅的监听的变化。在下几章中,重点介绍一下如何监听的改变。 单页应用的原理从早起的根据url的hash变化,到根据H5的history的变化,实现无刷新条件下的页面重新渲染。那么在单页应用中是如何监听url的变化呢,本文将总结一下,...
阅读 2949·2023-04-25 22:16
阅读 2096·2021-10-11 11:11
阅读 3250·2019-08-29 13:26
阅读 595·2019-08-29 12:32
阅读 3411·2019-08-26 11:49
阅读 2990·2019-08-26 10:30
阅读 1941·2019-08-23 17:59
阅读 1509·2019-08-23 17:57