通过history.pushState无刷新改变url
2016-07-14 14:14
357 查看
通过history.pushState无刷新改变url
观察地址栏,可以看到当url路径由”join”改变为”login”时,页面状态也随之改变,但并没有造成背景图片等资源的重新加载。 此时”join”被压入历史栈,当点击浏览器后退按钮时仍然能够回到”join”状态。
两次点击白色圆环改变页面背景,将在当前浏览器历史会话(
对比运行结果可以看到,多次执行
可以看到使用传统location跳转将会造成页面重载,虽然在功能上能够达到同样的目的,但在用户体验上将大打折扣。
需要注意的是每次hash发生变化时都会触发
http://www.cnblogs.com/silin6/p/linkFly_pushState.html?utm_source=tuicool http://www.cnblogs.com/yeer/archive/2013/01/21/2869827.html
背景
在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容。但随着单页应用的增多,越来越多的网站采用ajax来加载资源。因为异步加载的特性,地址栏上的资源路径没有被改变,随之而来的问题就是页面的状态无法被保存。这导致我们难以通过熟悉的方式(点击浏览器前进/后退按钮),在前后的页面状态间进行切换。 为了解决ajax页面状态不能返回的问题,人们想出了一些曲线救国的方法,比如利用浏览器hash的特性,将新的资源路径伪装成锚点,通过onhashchange事件来改变状态,同时又避免了浏览器刷新。但这样始终显得有些hack。 现在HTML5规范为
window.history引入了两个新api,
pushState和
replaceState,我们可以使用它很方便的达到改变url不重载页面的目的。
表现
改变地址栏url,不刷新页面。观察地址栏,可以看到当url路径由”join”改变为”login”时,页面状态也随之改变,但并没有造成背景图片等资源的重新加载。 此时”join”被压入历史栈,当点击浏览器后退按钮时仍然能够回到”join”状态。
使用
pushState与
replaceState方法类似,都有改变当前地址栏URL的作用。主要区别在于
pushState会在浏览器中创建一条新的历史纪录,而
replaceState仅仅替换将当前地址为指定URL。 下面以
pushState接口为例:
API
history.pushState(state, title[, url]);
事件
执行history.back()或
history.forward()后触发
window.onpopstate事件
参数
state: 对象,可以存存放一些数据表示当前状态。当浏览器执行前进后退操作时触发onpopstate事件,state将成为
event的子对象,可通过
event.state获取先前状态。但是注意state中的属性值不能为引用类型对象,会报
ObjectCloneError(对象克隆异常),例如允许{data:”test”},不允许{data:document.querySelector(‘#testId’)}。 title:目前无特殊意义,一般可以传入
document.title或 ”(空字符串)。 url:要替换的url,如果是
pushState则会添加一条历史记录,不允许跨域。
示例
history.pushState({title:"login"}, "login", "fish/login"); window.addEventListener("popstate", function(event){ if(event.state) { var state = event.state.title; switch(state) { case "login":.............;break; case "join" :.............;break; case "home" :.............;break; } } }, false);
实例
下面以一个具体实例来展示pushState的作用,注意地址栏的变化。
效果
两次点击白色圆环改变页面背景,将在当前浏览器历史会话(
window.history)中写入两条新记录:“/pushState.html?state=blue”和“/pushState.html?state=org”。 点击浏览器后退/前进按钮相当于执行
history.back()与
history.forward()方法,将触发
onpopstate事件,通过监听
onpopstate事件改变相应状态。
源代码
本实例在Chrome下编写调试,请在Chrome、Firefox、IE10+等现代浏览器中运行。<!DOCTYPE html> <html> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name="renderer" content="webkit" /> <head> <title>pushState demo</title> <style> body { font-family: "Microsoft YaHei"; transition: background-color .3s; } .bg-org { color: #383c3c; background-color: #FF6633; } .bg-blue { color: #fbfaf5; background-color: #6699FF; } .time { margin-top: 20%; text-align: center; font-size: 4em; font-weight: 100; } .switch { margin: auto; width: 30px; height: 30px; position:absolute; bottom:25%; left:0; right:0; cursor:pointer; box-shadow: 0 0 0 5px rgba(255,255,255,.6); border-radius: 50%; transition: box-shadow .1s; } .switch:hover { box-shadow: 0 0 0 5px rgba(255,255,255,.75); } .switch:active { box-shadow: 0 0 0 30px rgba(255,255,255,.4); } </style> </head> <body class="bg-org"> <h1 id="time" class="time">Loading...</h1> <div id="switch" class="switch"></div> <script> var time = $('#time'); function $(selector) {return document.querySelector(selector);} // 显示当前时间 setInterval(function(){ var date = new Date(), format = function(n) {return n<10?'0'+n:n}; time.innerHTML = format(date.getHours()) + ' : ' + format(date.getMinutes()) + ' : ' + format(date.getSeconds()); }, 500); $('#switch').addEventListener('click', toggleState, false); // 监听popstate事件 history.pushState && window.addEventListener("popstate", function(e) { // 获取history.state对象中的状态信息 // 在这里state将自动成为event的子对象,可直接通过event.state访问 var flag = e.state && e.state.title; $('body').className = flag || ($('body').className=='bg-org'?'bg-blue':'bg-org'); }, false); function toggleState(e) { var flag = $('body').className=='bg-org'?'bg-blue':'bg-org'; // 新建历史记录,将当前状态信息保存至history.state中 history.pushState && history.pushState({ title: flag }, flag, 'pushState.html?state='+flag.split('-')[1]); $('body').className = flag; } </script> </body> </html>
更多
replaceState
前面曾说过,pushState和
replaceState的区别在于
pushState会在浏览器中创建一条新历史纪录,而
replaceState仅替换当前地址。 我们将上面的实例稍作修改,观察
replaceState的具体表现。 替换
history.pushState为
history.replaceState:
history.pushState && history.replaceState({ title: flag }, flag, 'pushState.html?state='+flag.split('-')[1]);
对比运行结果可以看到,多次执行
replaceState仅改变当前地址栏的URL,而没有创建新的历史记录。
window.location
下面我们再使用传统的window.location跳转,对比与
pushState的区别。
<script> if(urlParam('state')=='blue') { $('body').className = 'bg-blue'; } else { $('body').className = 'bg-org'; } var time = $('#time'); function $(selector) {return document.querySelector(selector);} // 显示当前时间 setInterval(function(){ var date = new Date(), format = function(n) {return n<10?'0'+n:n}; time.innerHTML = format(date.getHours()) + ' : ' + format(date.getMinutes()) + ' : ' + format(date.getSeconds()); }, 500); $('#switch').addEventListener('click', toggleState, false); function toggleState(e) { var flag = $('body').className=='bg-org'?'bg-blue':'bg-org'; window.location = location.pathname + '?state=' + flag.split('-')[1]; $('body').className = flag; } /** * 获取url参数 * @param {String} name 参数名 * @return {String} 参数值 */ function getUrlParam(name){ var reg, value; reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); value = window.location.search.substr(1).match(reg); return value==null?null:decodeURI(value[2]); } </script>
可以看到使用传统location跳转将会造成页面重载,虽然在功能上能够达到同样的目的,但在用户体验上将大打折扣。
#hash
最后再来介绍另一种无刷新技巧window.location.hash的使用。 URL中#称为位置的标识符,代表网页中的一个位置,当浏览器读取这个URL后,会自动将可视区域滚动至所定义的锚点处。HTTP请求中不包括#,也就是说改变#后的内容不会向服务器发起请求,因此也就不会引起页面重载。 window.location.hash这个属性可读可写。读取时,可以用来判断网页状态是否改变;写入时,则会在不重载网页的前提下,创造一条访问历史记录。 当#值发生变化时,就会触发
onhashchange事件。
<script> var time = $('#time'); function $(selector) {return document.querySelector(selector);} // 显示当前时间 setInterval(function(){ var date = new Date(), format = function(n) {return n<10?'0'+n:n}; time.innerHTML = format(date.getHours()) + ' : ' + format(date.getMinutes()) + ' : ' + format(date.getSeconds()); }, 500); // 监听onhashchange事件 window.addEventListener("hashchange", function(e) { // 获取hash值判断页面状态 var flag = location.hash && location.hash.substring(1); $('body').className = 'bg-'+flag || ($('body').className=='bg-org'?'bg-blue':'bg-org'); }, false); $('#switch').addEventListener('click', toggleState, false); function toggleState(e) { var flag = $('body').className=='bg-org'?'bg-blue':'bg-org'; // 在url中写入新的hash值 location.hash = flag.split('-')[1]; $('body').className = flag; } </script>
需要注意的是每次hash发生变化时都会触发
onhashchange事件。而
onpopstate事件只会在历史记录(history entry)变化时触发,比如执行浏览器的前进/后退操作。
最后
本文介绍了pushState/
replaceState诞生的背景以及API的使用。又通过一个简单的实例与location,hash等技术进行了对比。相信大家已经可以很直观的看到
pushState和
replaceState的作用及区别。如有错误的地方欢迎交流指正。 随着HTML5标准的确定,pushState与ajax技术,将会在单页应用中发挥越来越重要的作用,国外也有一个叫pjax(pushState+ajax)的库将它们予以封装。
参考
https://developer.mozilla.org/zh-CN/docs/Web/Events/popstatehttp://www.cnblogs.com/silin6/p/linkFly_pushState.html?utm_source=tuicool http://www.cnblogs.com/yeer/archive/2013/01/21/2869827.html
相关文章推荐
- Emeditor V14注册码
- LinuxMint 18 编译cm13.0 笔记
- Android获得屏幕高度和宽度
- 宏与const的区别
- 「能写代码」是愚公移山,「会写代码」是女娲补天
- <LeetCode> 题69~71: 二叉树的层级遍历
- easyUI combobox在火狐浏览器不兼容问题
- vmware 各个文件类型说明
- Android 支付宝,微信支付 支付界面
- 爱游思 » 站长常用工具
- 几种任务调度的 Java 实现方法与比较
- Linux常用命令-文件搜索命令
- Android EditText 的使用及值得注意的地方
- 分治法——基本思想
- iOS开发200个tips总结(一)
- kaili开启sshd服务
- SQLSERVER和ORACLE批量处理表名和字段名大写
- 最大流,Floyd(UNIX插头 uva 753)
- Android 6.0拨号界面号码格式化
- 度熊的哈希