- 浏览: 3319158 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (567)
- Web前端-html/表单 (19)
- Web前端-CSS (24)
- Web前端-CSS框架 (4)
- Web前端-JS语言核心 (50)
- Web前端-JS客户端 (26)
- nodejs生态+grunt (10)
- seajs和requirejs (9)
- backbone等框架 (7)
- 模板基础 (7)
- Web前端-deps(不改动) (6)
- Web前端-component (10)
- Web前端-jquery-plugin (13)
- 浏览器兼容性 (6)
- Web前端-使用jQuery (25)
- Web前端-使用jqueryui (6)
- Web前端-性能优化 (3)
- Web协议-HTTP (6)
- ExtJS (13)
- PHP (22)
- PHP面向对象 (4)
- PHP扩展-SOAP (6)
- PHP扩展-curl (4)
- PHP与HTML(导出) (5)
- PHP扩展-综合 (7)
- mysql基础应用 (18)
- 技术心情 (18)
- 算法和面试题 (17)
- 工具(开发)使用 (36)
- memcached原理 (2)
- session和cookie (4)
- UML (2)
- Web前端_FusionCharts (5)
- Web前端_Flex (4)
- Web前端_JSP (3)
- JavaSE (10)
- JavaEE (4)
- tomcat (2)
- Servlet开发 (3)
- Spring开发 (1)
- REST相关 (2)
- 大访问量、高并发 (2)
- 网络编程 (1)
- YII (21)
- linux命令和内核 (12)
- yii与数据库 (10)
- yii与表单 (12)
- yii view层 (1)
- perl (7)
- yii扩展 (7)
- shell (4)
- photoshop (7)
- 视觉设计 (2)
- 我关注的名人在路上 (4)
- 1-自学能力 (1)
- 2-人际沟通能力 (3)
- 3-职业规划能力 (7)
- 4-项目管理能力 (2)
- python (3)
- django (4)
- Mysql高级应用 (6)
- prototype.js (4)
- Web系统安全 (1)
- Web前端-mobile (2)
- egret (6)
- jQuery源码分析 (5)
- fis (4)
最新评论
-
yzq21056563:
感谢作者分享~请教下,http://www.lisa33xia ...
CSS基础:text-overflow:ellipsis溢出文本 -
u012206458:
$.ajax的error,complete,success方法 -
DEMONU:
谢谢,虽然不能给你赞助,但是要给你顶
mysql中key 、primary key 、unique key 与index区别 -
njupt_tolmes:
阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿滕庆亚 ...
CSS基础:text-overflow:ellipsis溢出文本 -
zenmshuo:
用过SpreadJS,也包含数据可视化的图表
推荐几个web中常用js图表插件
作者:zccst
旧版:
forword()
backword()
go(number)
HTML5中新增了
onhashchange 浏览器兼容性较好,用得较多
pushState / replaceState / onpopState
一、onhashchange
hashchange事件在当前页面URL中的hash值发生改变时触发 (查看location.hash).
区别:
通过window.onpopstate来监听url的变化,但会忽略URL的hash部分。
结论:两者恰恰互补,各有分工。
hashchange 事件对象有下面两个属性
newURL DOMString 当前页面新的URL
oldURL DOMString 当前页面旧的URL
二、pushState / replaceState / onpopState
(通俗易懂版)
HTML5的新API扩展了window.history,使历史记录点更加开放了。可以存储当前历史记录点、替换当前历史记录点、监听历史记录点,下面逐一简要说明一下。
1、存储当前历史记录点
存储的方式类似于数组的入栈(Array.push()),在window.history里新增一个历史记录点,例如:
// 当前的url为:http://qianduanblog.com/index.html
var json={time:new Date().getTime()};
// @状态对象:记录历史记录点的额外对象,可以为空
// @页面标题:目前所有浏览器都不支持
// @可选的url:浏览器不会检查url是否存在,只改变url,url必须同域,不能跨域
window.history.pushState(json,"","http://qianduanblog.com/post-1.html");
执行了pushState方法后,页面的url地址为http://qianduanblog.com/post-1.html。
2、替换当前历史记录点
window.history.replaceState和window.history.pushState类似,不同之处在于replaceState不会在window.history里新增历史记录点,其效果类似于window.location.replace(url),都是不会在历史记录点里新增一个记录点的。当你为了响应用户的某些操作,而要更新当前历史记录条目的状态对象或URL时,使用replaceState()方法会特别合适。
3、监听历史记录点
监听历史记录点,直观的可认为是监听URL的变化,但会忽略URL的hash部分,监听URL的hash部分,HTML5有新的API为onhashchange,我的博客里也有说到该方法和跨浏览器的兼容解决方案。可以通过window.onpopstate来监听url的变化,并且可以获取存储在该历史记录点的状态对象,也就是上文说到的json对象,如:
// 当前的url为:http://qianduanblog.com/post-1.html
window.onpopstate=function()
{
// 获得存储在该历史记录点的json对象
var json=window.history.state;
// 点击一次回退到:http://qianduanblog.com/index.html
// 获得的json为null
// 再点击一次前进到:http://qianduanblog.com/post-1.html
// 获得json为{time:1369647895656}
}
值得注意的是:javascript脚本执行window.history.pushState和window.history.replaceState不会触发onpopstate事件。
(文绉绉版)
HTML5引进了history.pushState()方法和history.replaceState()方法,它们允许你逐条地添加和修改历史记录条目。这些方法可以协同window.onpopstate事件一起工作。
1,pushState()
某种意义上,调用pushState()有点类似于设置window.location='#foo',它们都会在当前文档内创建和激活新的历史记录条目。但pushState()有自己的优势:
新的URL可以是任意的同源URL,与此相反,使用window.location方法时,只有仅修改 hash 才能保证停留在相同的document中。
根据个人需要来决定是否修改URL。相反,设置window.location='#foo',只有在当前hash值不是foo时才创建一条新历史记录。
你可以在新的历史记录条目中添加抽象数据。如果使用基于hash的方法,你只能把相关数据转码成一个很短的字符串。
注意pushState()方法永远不会触发hashchange事件,即便新的地址只变更了hash。
2,replaceState()方法
history.replaceState()操作类似于history.pushState(),不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目。
当你为了响应用户的某些操作,而要更新当前历史记录条目的状态对象或URL时,使用replaceState()方法会特别合适。
3,popstate事件
每当激活的历史记录发生变化时,都会触发popstate事件。如果被激活的历史记录条目是由pushState所创建,或是被replaceState方法影响到的,popstate事件的状态属性将包含历史记录的状态对象的一个拷贝。
举例:
history.pushState
菊花插一刀之意,用法举例:
history.pushState({}, "页面标题", "xxx.html");
history.pushStatehistory.replaceState
换把菊花刀之意,用法举例:
history.replaceState(null, "页面标题", "xxx.html");
window.onpopstate
在菊花刀拔插的时候……,用法举例:
window.addEventListener("popstate", function() {
var currentState = history.state;
/*
* 该干嘛干嘛
*/
});
完整实例:
http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/
策略如下:
每次手动点击左侧的菜单,我将Ajax地址的查询内容(?后面的)附在demo HTML页面地址后面,使用history.pushState塞到浏览器历史中。
浏览器的前进与后退,会触发window.onpopstate事件,通过绑定popstate事件,就可以根据当前URL地址中的查询内容让对应的菜单执行Ajax载入,实现Ajax的前进与后退效果。
页面首次载入的时候,如果没有查询地址、或查询地址不匹配,则使用第一个菜单的Ajax地址的查询内容,并使用history.replaceState更改当前的浏览器历史,然后触发Ajax操作。
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
旧版:
forword()
backword()
go(number)
HTML5中新增了
onhashchange 浏览器兼容性较好,用得较多
pushState / replaceState / onpopState
一、onhashchange
hashchange事件在当前页面URL中的hash值发生改变时触发 (查看location.hash).
区别:
通过window.onpopstate来监听url的变化,但会忽略URL的hash部分。
结论:两者恰恰互补,各有分工。
if ("onhashchange" in window) { alert("该浏览器支持hashchange事件!"); } function locationHashChanged() { if (location.hash === "#somecoolfeature") { somecoolfeature(); } } window.onhashchange = locationHashChanged;
hashchange 事件对象有下面两个属性
newURL DOMString 当前页面新的URL
oldURL DOMString 当前页面旧的URL
二、pushState / replaceState / onpopState
(通俗易懂版)
HTML5的新API扩展了window.history,使历史记录点更加开放了。可以存储当前历史记录点、替换当前历史记录点、监听历史记录点,下面逐一简要说明一下。
1、存储当前历史记录点
存储的方式类似于数组的入栈(Array.push()),在window.history里新增一个历史记录点,例如:
// 当前的url为:http://qianduanblog.com/index.html
var json={time:new Date().getTime()};
// @状态对象:记录历史记录点的额外对象,可以为空
// @页面标题:目前所有浏览器都不支持
// @可选的url:浏览器不会检查url是否存在,只改变url,url必须同域,不能跨域
window.history.pushState(json,"","http://qianduanblog.com/post-1.html");
执行了pushState方法后,页面的url地址为http://qianduanblog.com/post-1.html。
2、替换当前历史记录点
window.history.replaceState和window.history.pushState类似,不同之处在于replaceState不会在window.history里新增历史记录点,其效果类似于window.location.replace(url),都是不会在历史记录点里新增一个记录点的。当你为了响应用户的某些操作,而要更新当前历史记录条目的状态对象或URL时,使用replaceState()方法会特别合适。
3、监听历史记录点
监听历史记录点,直观的可认为是监听URL的变化,但会忽略URL的hash部分,监听URL的hash部分,HTML5有新的API为onhashchange,我的博客里也有说到该方法和跨浏览器的兼容解决方案。可以通过window.onpopstate来监听url的变化,并且可以获取存储在该历史记录点的状态对象,也就是上文说到的json对象,如:
// 当前的url为:http://qianduanblog.com/post-1.html
window.onpopstate=function()
{
// 获得存储在该历史记录点的json对象
var json=window.history.state;
// 点击一次回退到:http://qianduanblog.com/index.html
// 获得的json为null
// 再点击一次前进到:http://qianduanblog.com/post-1.html
// 获得json为{time:1369647895656}
}
值得注意的是:javascript脚本执行window.history.pushState和window.history.replaceState不会触发onpopstate事件。
(文绉绉版)
HTML5引进了history.pushState()方法和history.replaceState()方法,它们允许你逐条地添加和修改历史记录条目。这些方法可以协同window.onpopstate事件一起工作。
1,pushState()
某种意义上,调用pushState()有点类似于设置window.location='#foo',它们都会在当前文档内创建和激活新的历史记录条目。但pushState()有自己的优势:
新的URL可以是任意的同源URL,与此相反,使用window.location方法时,只有仅修改 hash 才能保证停留在相同的document中。
根据个人需要来决定是否修改URL。相反,设置window.location='#foo',只有在当前hash值不是foo时才创建一条新历史记录。
你可以在新的历史记录条目中添加抽象数据。如果使用基于hash的方法,你只能把相关数据转码成一个很短的字符串。
注意pushState()方法永远不会触发hashchange事件,即便新的地址只变更了hash。
2,replaceState()方法
history.replaceState()操作类似于history.pushState(),不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目。
当你为了响应用户的某些操作,而要更新当前历史记录条目的状态对象或URL时,使用replaceState()方法会特别合适。
3,popstate事件
每当激活的历史记录发生变化时,都会触发popstate事件。如果被激活的历史记录条目是由pushState所创建,或是被replaceState方法影响到的,popstate事件的状态属性将包含历史记录的状态对象的一个拷贝。
举例:
history.pushState
菊花插一刀之意,用法举例:
history.pushState({}, "页面标题", "xxx.html");
history.pushStatehistory.replaceState
换把菊花刀之意,用法举例:
history.replaceState(null, "页面标题", "xxx.html");
window.onpopstate
在菊花刀拔插的时候……,用法举例:
window.addEventListener("popstate", function() {
var currentState = history.state;
/*
* 该干嘛干嘛
*/
});
完整实例:
http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/
策略如下:
每次手动点击左侧的菜单,我将Ajax地址的查询内容(?后面的)附在demo HTML页面地址后面,使用history.pushState塞到浏览器历史中。
浏览器的前进与后退,会触发window.onpopstate事件,通过绑定popstate事件,就可以根据当前URL地址中的查询内容让对应的菜单执行Ajax载入,实现Ajax的前进与后退效果。
页面首次载入的时候,如果没有查询地址、或查询地址不匹配,则使用第一个菜单的Ajax地址的查询内容,并使用history.replaceState更改当前的浏览器历史,然后触发Ajax操作。
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
发表评论
-
js浏览器端判断当期是否在线
2015-04-17 20:50 2368作者:zccst 纯浏览器端解决办法就是轮询,img轮询和a ... -
scroll时判断向下滚动还是向上滚动
2015-03-30 16:53 38286作者:zccst 有时候需要用到,判断页面是向上还是向下滚动 ... -
[BOM]navigator知识点
2015-03-20 14:42 4848作者:zccst 历史 最早的时候有一个浏览器叫NCSA ... -
[html5]navigator.online属性检测用户是否在线
2015-03-20 14:11 5337作者:zccst navigator.online属性检测用 ... -
document.body、document.documentElement和window获取视窗大小的区别
2015-03-04 15:12 27649作者:zccst 参考网址:http://www.ido32 ... -
Document,Node,Element,HTMLDocument ,HTMLCollection,HTMLElement,NodeList
2015-01-05 15:38 7557作者:zccst 这个问题如 ... -
doctype和compatModel相关
2015-01-04 19:30 711作者:zccst 一、doctype 1,严格模式与混杂模 ... -
js 页面刷新location.reload和location.replace的区别小结
2014-12-02 20:57 129598作者:zccst reload 方法,该方法强迫浏览器刷新当 ... -
又一次掉进encodeURIComponent的坑里了
2014-11-05 18:21 22474作者:zccst 原坑: get请求 ajax.get ( ... -
DOM元素在浏览器中的位置参数,如offset,ownerDocument
2014-10-08 17:07 4253作者:zccst 2014-10-21 区分clientX ... -
js跨域的多种解决办法
2014-09-20 09:41 940作者:zccst 2015-3-11 JavaScript ... -
[Event]事件(高程版)(二)事件处理程序
2014-06-17 18:00 760作者:zccst <input type=" ... -
[Event]事件(高程版)(一)事件类型
2014-06-17 17:59 722作者:zccst 一、UI事件 1,load 两种添加方式 ... -
target与currentTarget的区别(jqueryui方式获取z-Index)
2014-06-17 12:00 15932作者:zccst 2014-6-25 今天看了jQuery ... -
JSONP原理及实现
2014-06-09 16:47 12356作者:zccst 2015-04-30 更新 跨域实现的 ... -
事件基础(高程版)
2014-06-09 16:37 1024作者:zccst 2014-5-4 一、事件流 标准:DOM ... -
DOM0-节点关系,节点操作API
2014-06-09 15:29 949作者:zccst 2014-09-20 补 ... -
document操作iframe
2013-12-13 16:26 1265作者:zccst //在iframe内获取父页面节点 win ... -
js-location对象
2013-12-11 17:05 1503zccst总结 2015-04-14 获取location的 ... -
document.body.scrollTop和document.documentElement.scrollTop
2013-09-14 14:44 1369作者:zccst 网页可见区域宽: document.bo ...
相关推荐
在JavaScript中,window.history...history.state属性可以用于存储和管理页面状态,它在popstate事件中非常有用。 通过这些方法,开发者可以创建更加动态和用户友好的Web应用程序,提供类似于单页应用(SPA)的导航体验
- `window.history`:提供了浏览历史记录的管理功能,如`history.back()`、`history.forward()`。 - `window.document`:提供了对HTML文档的访问,可以用来操作DOM元素。 - `window.alert()`、`window.confirm()`和`...
`window.history.back()`和`window.history.forward()`可以实现页面的后退和前进操作,而`window.history.go(n)`则可以指定移动的历史记录步数。 ```javascript window.history.back(); // 后退一步 window.history....
window.history.back();//后退window.history.forward();//前进window.history.go(-1);//移动到指定记录点,当前倒退1,相当于window.history.forward()window.history.length//可以了解历史中有多少个记录点 以上...
3. window.history.forward()返回下一页 4. window.history.go(返回第几页,也可以使用访问过的URL) 例: 复制代码 代码如下: 向上一页 response.Write(“[removed]”) response.Write(“if(!confirm(‘完成任务?...
window.history.back(); } ``` 这段代码创建了一个按钮,当用户点击时,就会触发 goBack() 函数,浏览器执行后退操作。同理,如果要向前浏览历史记录中的页面,只需将 back() 方法替换为 forward() 即可。 需要...
本文详细介绍了 JavaScript 中返回历史记录的方法,包括 `history.go()`、`history.back()`、`window.history.forward()` 以及如何结合使用 `confirm()` 和 `window.location.href` 来优化用户体验。此外,还简要...
iOS在微信浏览器回退是不重新加载页面... //window.history.back(); //在历史记录中后退,这就像用户点击浏览器的后退按钮一样。 //window.history.go(-1); //你可以使用go()方法从当前会话的历史记录中加载页面(当
window.history.back(); ``` ##### 应用场景: 1. **表单验证**:在表单提交之前,如果发现填写的数据有误,可以通过 `history.back()` 返回到表单页面重新填写。 2. **错误页面跳转**:当用户访问的页面不存在或...
if (window.history && window.history.pushState) { $(window).on('popstate', function () { // 当点击扫瞄器的后退和前进按钮时触发 window.history.pushState('forward', null, ''); window.history....
JavaScript返回上一页代码区别: ...window.history.go(-1); //返回上一页 window.history.back(); //返回上一页 //如果要强行刷新的话就是:window.history.back();location.reload(); [removed].go(-1); //刷新上一页
1. `window.history.length`属性:这个属性返回浏览器历史记录中的条目数量,包括当前页面。当你点击链接或者进行页面跳转时,这个数字会增加。如果你回退到前一个页面,这个数字不会减少,除非你关闭了浏览器或者...
找到以下代码 tf05.window.scroll(scrollx,scrolly) 在后面增加 tf06.window.scroll(scrollx,scrolly) 第三步 找到以下代码 if(tf05.history.length==0){window.history.back()} else{tf05.history.back()} 在后面...
input type=button value=前进 onclick=”window.history.go(1)”> <input type=button value=后退 onclick=”window.history.go(-1)”> <input type=button value=前进 onclick=”window.history....
- `window.history`: 提供对浏览历史的访问,如`history.back()`返回前一个页面,`history.forward()`前进到下一个页面。 - `window.navigator`: 包含关于用户浏览器的信息,如`navigator.userAgent`可以获取...
在管理系统开发中,经常遇到列表页面-跳转到某一记录的业务操作详细页面,操作完成之后需要回返列表页面需要刷新,使用window.history.back(); window.history.go(-1); 只能是回返目的,而未能刷新;使用self....
综上所述,JavaScript子页面调用父页面主要依赖于`window.parent`、`window.postMessage`、`window.location`、`window.history`以及事件监听等方法。这些技术在实现跨页面通信、数据交换、页面控制等方面具有重要...
- **后退/前进**:`window.history.back()` 使浏览器后退一步,`window.history.forward()` 则前进一步。 - **刷新页面**:`window.location.reload()` 可以强制刷新页面,`window.location.href = window....