`
zccst
  • 浏览: 3319158 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

window.history

阅读更多
作者:zccst





旧版:
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操作。



如果您觉得本文的内容对您的学习有所帮助,您可以微信:
  • 大小: 16.3 KB
  • 大小: 57 KB
分享到:
评论

相关推荐

    `window.history`对象在JavaScript中提供了哪些方法

    在JavaScript中,window.history...history.state属性可以用于存储和管理页面状态,它在popstate事件中非常有用。 通过这些方法,开发者可以创建更加动态和用户友好的Web应用程序,提供类似于单页应用(SPA)的导航体验

    字符串 window.open() window.opener window.name window对象等的总结

    - `window.history`:提供了浏览历史记录的管理功能,如`history.back()`、`history.forward()`。 - `window.document`:提供了对HTML文档的访问,可以用来操作DOM元素。 - `window.alert()`、`window.confirm()`和`...

    JS页面跳转和js对iframe进行页面跳转、刷新

    `window.history.back()`和`window.history.forward()`可以实现页面的后退和前进操作,而`window.history.go(n)`则可以指定移动的历史记录步数。 ```javascript window.history.back(); // 后退一步 window.history....

    HTML5无刷新改变当前url的代码

    window.history.back();//后退window.history.forward();//前进window.history.go(-1);//移动到指定记录点,当前倒退1,相当于window.history.forward()window.history.length//可以了解历史中有多少个记录点 以上...

    js实现上一页下一页的效果【附代码】

    3. window.history.forward()返回下一页 4. window.history.go(返回第几页,也可以使用访问过的URL) 例: 复制代码 代码如下: 向上一页 response.Write(“[removed]”) response.Write(“if(!confirm(‘完成任务?...

    JavaScript编程中window的location与history对象详解

    window.history.back(); } ``` 这段代码创建了一个按钮,当用户点击时,就会触发 goBack() 函数,浏览器执行后退操作。同理,如果要向前浏览历史记录中的页面,只需将 back() 方法替换为 forward() 即可。 需要...

    js返回所有方法

    本文详细介绍了 JavaScript 中返回历史记录的方法,包括 `history.go()`、`history.back()`、`window.history.forward()` 以及如何结合使用 `confirm()` 和 `window.location.href` 来优化用户体验。此外,还简要...

    iOS微信浏览器回退不刷新实例(监听浏览器回退事件)

    iOS在微信浏览器回退是不重新加载页面... //window.history.back(); //在历史记录中后退,这就像用户点击浏览器的后退按钮一样。 //window.history.go(-1); //你可以使用go()方法从当前会话的历史记录中加载页面(当

    javascript-history.go()和History.back()的区分_.docx

    window.history.back(); ``` ##### 应用场景: 1. **表单验证**:在表单提交之前,如果发现填写的数据有误,可以通过 `history.back()` 返回到表单页面重新填写。 2. **错误页面跳转**:当用户访问的页面不存在或...

    jquery微信浏览器阻止页面拖动.docx

    if (window.history && window.history.pushState) { $(window).on('popstate', function () { // 当点击扫瞄器的后退和前进按钮时触发 window.history.pushState('forward', null, ''); window.history....

    JavaScript返回上一页的三种方法及区别介绍

    JavaScript返回上一页代码区别: ...window.history.go(-1); //返回上一页 window.history.back(); //返回上一页 //如果要强行刷新的话就是:window.history.back();location.reload(); [removed].go(-1); //刷新上一页

    javascript经典特效---回退的页面数.rar

    1. `window.history.length`属性:这个属性返回浏览器历史记录中的条目数量,包括当前页面。当你点击链接或者进行页面跳转时,这个数字会增加。如果你回退到前一个页面,这个数字不会减少,除非你关闭了浏览器或者...

    MM qq2003正式版整站程序

    找到以下代码 tf05.window.scroll(scrollx,scrolly) 在后面增加 tf06.window.scroll(scrollx,scrolly) 第三步 找到以下代码 if(tf05.history.length==0){window.history.back()} else{tf05.history.back()} 在后面...

    [removed]history.go()和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设定打开和关闭窗口的方法

    - `window.history`: 提供对浏览历史的访问,如`history.back()`返回前一个页面,`history.forward()`前进到下一个页面。 - `window.navigator`: 包含关于用户浏览器的信息,如`navigator.userAgent`可以获取...

    返回上一页面并刷新

    在管理系统开发中,经常遇到列表页面-跳转到某一记录的业务操作详细页面,操作完成之后需要回返列表页面需要刷新,使用window.history.back(); window.history.go(-1); 只能是回返目的,而未能刷新;使用self....

    JS子页面掉父页面

    综上所述,JavaScript子页面调用父页面主要依赖于`window.parent`、`window.postMessage`、`window.location`、`window.history`以及事件监听等方法。这些技术在实现跨页面通信、数据交换、页面控制等方面具有重要...

    深入学习JavaScript中的bom

    - **后退/前进**:`window.history.back()` 使浏览器后退一步,`window.history.forward()` 则前进一步。 - **刷新页面**:`window.location.reload()` 可以强制刷新页面,`window.location.href = window....

Global site tag (gtag.js) - Google Analytics