首页 > 代码库 > History路由机制
History路由机制
用户访问网页的历史记录通常会被保存在一个类似于栈对象中,即history对象,点击返回就出栈,跳下一页就入栈。 它提供了一些方法来操作页面的前进和后退:
-
window.history.back() 返回到上一个页面
-
window.history.forward() 进入到下一个页面
-
window.history.go([delta]) 跳转到指定页面
HTML5 对History Api 进行了增强,新增了两个Api和一个事件,分别是pushState、replaceState 和 onpopstate
pushState是往history对象里添加一个新的历史记录,即压栈。
replaceState 是替换history对象中的当前历史。
当点击浏览器后退按钮或js调用history.back都会触发onpopstate事件, 与其类似的还有一个事件: onhashchange 。
onhashchange是老API, 浏览器支持度高, 本来是用来监听hash变化的, 但可以被利用来做客户端前进和后退事件的监听,onpopstate是专门用来监听浏览器前进后退的, 不仅可以支持hash, 非hash的同源url也支持。
如下:
一、onhashchange 事件在当前 URL 的锚部分(以 ‘#‘ 号为开始) 发生改变时触发 。
锚部分的实例:指定当前 URL 为
http://www.example.com/test.htm#part2 - 这个 URL 中的锚部分为 #part2。
你可以使用以下方式调用事件:
3、点击链接跳转到书签锚
demo:
二、window.onpopstate
是popstate
事件在window对象上的事件处理程序.
每当处于激活状态的历史记录条目发生变化时,popstate
事件就会在对应window
对象上触发. 如果当前处于激活状态的历史记录条目是由
history.pushState()
方法创建,或者由history.replaceState()方法修改过
的, 则popstate事件对象的
state
属性包含了这个历史记录条目的state对象的一个拷贝.
调用history.pushState()
或者history.replaceState()
不会触发popstate事件. popstate
事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()
方法).
当网页加载时,各浏览器对popstate
事件是否触发有不同的表现,Chrome 和 Safari会触发popstate
事件, 而Firefox不会.
语法:window.onpopstate = funcRef;
funcRef
是个函数名.
demo:
假如当前网页地址为http://example.com/example.html,则运行下述代码后
即便进入了那些非pushState和replaceState方法作用过的(比如http://example.com/example.html)没有state对象关联的那些网页, popstate
事件也仍然会被触发.
History路由机制