用pushState写一个router
2016-12-02 16:31
295 查看
前言:
日常我们使用着各种的router.BACKBONE-router,REACT-router等。但就几个页面的小项目,还要引用这些大型工具。就觉得特别麻烦。能有一种简便的,几行代码就能实现的router。能。
HTML5里引用了新的API,history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的。
router例子:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"/> <script src="test.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var index = 'index.html'; function changeURL(){ var url = index+'#'+document.getElementById('urlVal').value; var state = { title: window.document.title, url: window.location.href, time:new Date().getTime() }; window.history.pushState(state, document.title, url);//添加到历史记录 } window.onhashchange = function(e){//根据hash值变化 触发 console.log(e.oldURL) document.getElementsByTagName('h1')[0].innerHTML = e.newURL; } </script> </head> <body > <h1>首页</h1> <input type="text" name="" id="urlVal" /> <input type="button" name="" id="" value="改变当前URL" onclick="changeURL()" /> </br> <input type="button" name="" id="" value="返回" onclick="window.history.back()" /> <input type="button" name="" id="" value="前进" onclick="window.history.forward()" /> </body> </html> |
说明pushState和replaceState?
window对象通过
history对象提供对浏览器历史记录的访问能力。它暴露了一些非常有用的方法和属性,让你在历史记录中自由前进和后退,而在HTML5中,更可以操纵历史记录中的数据。而其中history.pushState()方法和history.replaceState()方法,它们允许你逐条地添加和修改历史记录条目。这些方法可以协同
window.onpopstate事件一起工作。history.pushState()方法和history.replaceState()方法可以不刷新页面而改变当前的URL。
Feature | 历史记录 | 例子 |
---|---|---|
pushState | 添加 | history.pushState(state, title, url) |
replaceState | 不添加 | history.pushState(state, title, url) |
任何可序列化的对象都可以被当做状态对象。因为FireFox浏览器会把状态对象保存到用户的硬盘,这样它们就能在用户重启浏览器之后被还原,我们强行限制状态对象的大小为640k。如果你向pushState()方法传递了一个超过该限额的状态对象,该方法会抛出异常。如果你需要存储很大的数据,建议使用sessionStorage或localStorage。
标题(title): FireFox浏览器目前会忽略该参数,虽然以后可能会用上。考虑到未来可能会对该方法进行修改,传一个空字符串会比较安全。或者,你也可以传入一个简短的标题,标明将要进入的状态。
地址(URL): 新的历史记录条目的地址。浏览器不会在调用pushState()方法后加载该地址,但之后,可能会试图加载,例如用户重启浏览器。新的URL不一定是绝对路径;如果是相对路径,它将以当前URL为基准;传入的URL与当前URL应该是同源的,否则,pushState()会抛出异常。该参数是可选的;不指定的话则为文档当前URL。
注意:history.pushState()方法和history.replaceState()方法跳转是不可以跨域的!!
说明onpopstate和onhashchange?
popstate事件每当激活的历史记录发生变化时,都会触发popstate事件。如果被激活的历史记录条目是由pushState所创建,或是被replaceState方法影响到的,popstate事件的状态属性将包含历史记录的状态对象的一个拷贝。
如:http://www.example.com/test.htm。改变成 http://www.example.com/index.html。
hashchange事件
e765
当前 URL 的锚部分(以 '#' 号为开始) 发生改变时触发 。
如:http://www.example.com/test.htm#part1 - 这个 URL 中的锚部分为 #part1。改变成 #part2就会触发。
其中url的记录有点区别,hashchange记录触发前后的url,而popstate.state着记录history.pushState()方法和history.replaceState()执行前的url。这个有所区别。用起来要按需使用。
Feature | URL |
---|---|
hashchange.newURL | 当前URL |
hashchange.oldURL | 上一个URL |
popstate.state | 保存state当前URL |
浏览器兼容性表:
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
replaceState, pushState | 5 | 4.0 (2.0) | 10 | 11.50 | 5.0 |
history.state | 18 | 4.0 (2.0) | 10 | 11.50 | 6.0 |
hashchange | 5.0 | 3.6 (1.9.2) Firefox 6 中加入对 oldURL/ newURL属性的支持. | 8.0 | 10.6 | 5.0 |
相关文章推荐
- 一个最简单的react-router设置
- 同一个网段内所有服务器virtual_router_id设置相同的后果
- 一个vue2.0+vuex+vue-router搭建的单页潮流购物网站
- Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
- React-Router+antd+webpack+babel的一个详细demo
- VUE 全家桶,vue2-vue-router-vuex-axios - 一个看笑话的 webapp
- react-redux-router 一个完整项目解读(附源码)
- 基于react+react-router+redux+socket.io+koa开发一个聊天室
- 基于react+react-router+redux+socket.io+koa开发一个聊天室
- 用avalon实现一个完整的todomvc(带router)
- vue vuex vue-router vue-resource 简单的搭建一个 vue 小项目
- 用vue.js和vue-router重构一个网站
- 一个vue2.0+vuex+vue-router搭建的单页潮流购物网站
- 基于Vue2.0+Vue-router构建一个简单的单页应用
- --@angularJS--一个简单的UI-Router路由demo
- 分享一个PHP项目或者框架可用的路由类Router.class.php
- springMVC-router创建一个简单的web工程
- vue-router的一个小实例
- React Router的一个完整示例
- 基于Vue2.0+Vue-router构建一个简单的单页应用