History回顾

window.history表示window对象的历史记录

window.history的简单回顾

历史记录中前进/后退，移动到指定历史记录点

window.history.back();window.history.forward();windiw.history.go(-1);//相当于back()window.history.go(1);//相当于forwar()window.history.go(0);//相当于刷新window.history.length;//查看历史记录栈中一共有多少个记录

对历史记录点进行修改

Html5的新API扩展了window.history，能够做到可以存储/替换/监听历史记录点

history.pushState(state, title, url)

在history内新增一个历史记录，会增加后退效果，无刷新改变浏览器地址

>接受三个参数：>state：状态对象，记录历史记录点的额外对象，可为null>title：页面标题，目前所以浏览器都不支持，需要的话可以用document.title来设置>url：新的网址，必须同域，浏览器地址栏会显示这个网址window.history.pushState(null, '', 'a.html');//页面不刷新，只是改变history对象，地址栏会改变window.history.pushState(null, '', '#aaa');>//url参数带了hash值并不会触发hashchange事件

url参数如果是以'?'开头，则url的值会代替seach的值，如果是以'#'开头，则url的值会代替hash的值，如果是以'/'开头，则url的值会代替/后的值。

history.replaceState(state, title, url)

使用姿势跟pushState一样，区别它是修改浏览历史中的当前记录，而并非创建一个新的，并不会增加后退效果，但是和pushState一样都会改变当前地址栏的地址
```
window.history.replaceState({a:1}, '', 'b.html')
```

history.state属性

返回当前页面的state对象，想改变此对象可以给pushState和replaceState的第一个参数传参
```
window.history.state //{a:1}
```

监听历史记录

hashchange：当前url的hash改变的时候会触发该事件，ie6.7不支持。

window.onhashchange = function(){    console.log(location.hash)};//hashchange事件必须绑定再widnow对象上

做兼容，在ie6、7下可以用setInterval模拟

if(('onhashchange' in window) && ((typeof document.documentMode === 'undefined') || document.documentMode == 8)) {    //在IE8以ie7的模式运行时，window下存在onhashchange这个方法，但是永远不会触发这个事件    //不能用 typeof window.onhashchange === ‘undefined’ 来检测，因为很多支持onhashchange的浏览器下，其初始值就是undefined    window.onhashchange = function() {        console.log(window.location.hash);    };} else {//不支持onhashchange用定时器判断hash是否改变    var location = window.location;    var oldHash = location.hash;    setInterval(function() {        var newHash = location.hash;        if(newHash === oldHash) {            console.log(location.hash);        }    })}

popstate: 当浏览记录出现变化时，会触发此事件，可以用此来监听urlwindow.oppopstate = function(event) { console.log(event.state); }//event.state的值是history.state的值

调用pushState和replaceState事件不会触发popstate事件，当点击后退或者前进按钮时才触发，或者调用go()方法触发;

ps:页面第一次加载时，在load事件之后，Chrome和Safari能够触发popstate事件，而Firefox和Ie不能；

简单应用：无刷新页面，改变url，产生历史记录

很多网站都是左侧为导航栏，右侧为内容区，点击导航栏，只刷新内容不刷新url，并且会生产浏览记录可以点击后退前进；

具体操作：点击左侧导航链接，阻止页面跳转，把地址pushState到浏览记录，ajax局部刷新；点击后退/前进时，用popstate监听，ajax局部刷新，解决问题