Js的History对象

History回顾

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

1. 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;//查看历史记录栈中一共有多少个记录

2. 对历史记录点进行修改

   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不能；

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

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

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

参考文章：

http://www.impng.com/web-dev/hashchange-event-and-onhashchange.html

http://javascript.ruanyifeng.com/bom/history.html#