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#

上一篇:linux内核链表分析


下一篇:结合阿里云云开发平台,全程上云开发Serverless SSR应用