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操作。
window.history的更多相关文章
- safari 浏览器window.history.go(-1)运行无效解决办法
这几天做了几个手机端app的wap页面,做完之后发现一个问题,那就是ios系统下的safari浏览器不支持window.history.go(-1)..无语... 解决方法很简单!加上return f ...
- javascript:window.history.go(-1)
history是你浏览过的网页的url(简单的说就是网址)的集合,也就是你的浏览器里的那个历史记录.它在js里是一个内置对象,就跟document一样,它有自己的方法,go就是其中一个. 这个方法的参 ...
- window.history 和 DWZ 框架
DWZ框架的ajax请求返回的一般都是一个HTML片段,整个页面是由一个个HTML片段组成的,可以由TAB切换其内容,但是只有一个body和HEAD,一般head 和 菜单栏是不会动的. 今天遇到一个 ...
- window.history.pushState与ajax实现无刷新更新页面url
ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...
- javascript宿主对象之window.history
window.historys属性允许我们操作同一个浏览器回话中的已访问页面,例如我们可以看到在这之前我们浏览页面的数量: window.history.length 由于隐私保护,我们无法获取这些页 ...
- 由window.history.back()引发的问题
由window.history.back()引发的问题 编写人:CC阿爸 2015-1-30 今天在这里,我想与大家一起分享由windows.history.back()引发的问题,笔者在实际开发当中 ...
- 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 返回页面,主页面不刷新window.history.go(-1),主页面刷新window.location.go(-1)
返回上一页,不刷新 window.history.go(-1) 返回上一页,刷新 window.location.go(-1)
- 关于window.history.back()后退问题
Windows下的window.history.back()后退后返回的不仅仅是前一个页而是前一个页的状态.假设一个页我改动了3次那必须后退3次才干回到前一个页.并且数据库中删除的数据依旧显示在上面感 ...
随机推荐
- NGUI屏幕自适应解决方案
NGUI研究院之自适应屏幕 http://www.xuanyusong.com/archives/2536 Unity3D研究院之使用Android的硬件缩放技术优化执行效率 http://www.x ...
- 【hadoop2.6.0】一句话形容mapreduce
网上看到的: We want to count all the books in the library. You count up shelf #1, I count up shelf #2. Th ...
- Android 用Activity的onTouchEvent来监听滑动手势
package com.example.activityOnTouchEvent; import android.app.Activity; import android.os.Bundle; imp ...
- 如何正确学习JavaScript
不要这样学习JavaScript 不要一开始就埋头在成堆的JavaScript在线教程里 ,这是最糟糕的学习方法.或许在看过无数个教程后会有点成效,但这样不分层次结构地学习一个东西实在是十分低效,在实 ...
- 欧拉工程第57题:Square root convergents
题目链接 Java程序 package projecteuler51to60; import java.math.BigInteger; import java.util.Iterator; impo ...
- lintcode :旋转字符串
题目: 旋转字符串 给定一个字符串和一个偏移量,根据偏移量旋转字符串(从左向右旋转) 样例 对于字符串 "abcdefg". offset=0 => "abcdef ...
- 【nginx运维基础(6)】Nginx的Rewrite语法详解
概述 重写URL是非常有用的一个功能,因为它可以让你提高搜索引擎阅读和索引你的网站的能力:而且在你改变了自己的网站结构后,无需要求用户修改他们的书签,无需其他网站修改它们的友情链接:它还可以提高你的网 ...
- linux上tomcat安装
转载:http://my.oschina.net/zmf/blog/309484 tomcat安装 下载后解压:tar -zxvf apache-tomcat-7.0.28 移动到/usr/local ...
- java:构造函数
class Dog { Dog(){ } } 构造函数没有返回值定义,构造函数名必须和类名相同,如果类里面没有构造函数,编译器会帮你加一个构造函数. 使用this调用构造函数 class Dog { ...
- 247. Strobogrammatic Number II
题目: A strobogrammatic number is a number that looks the same when rotated 180 degrees (looked at ups ...