首页 专题 H5案例 前端导航 UI框架

如何通过 JS 来修改浏览器地址而页面不刷新

作者:TG 日期: 2016-09-23 阅读: 778

history对象:它提供了一些非常有用的方法和属性,让我们在历史记录中自由前进和后退。

一、历史记录概览

1、前进与后退

window.history.back()  //后退

window.history.forward()  //前进


2.移动到指定的历史记录点

window.history.go(-1)  //相当于back(),后退一页

window.history.go(1)   //相当于forward(),前进一页



3.历史长度

window.history.length


下面才是我们这篇文章的重点,也是在HTML5中才引进的。


二、添加和修改历史记录条目


有两个方法:

  • history.pushState():会改变referrer的值,而在你调用方法后创建的 XMLHttpRequest 对象会在 HTTP 请求头中使用这个值。referrer的值则是创建 XMLHttpRequest 对象时所处的窗口的URL。
  • history.replaceState():会修改当前历史记录条目而并非创建新的条目


我们先来看一个完整的例子再来了解这两个方法

<div id="aa"></div>

<button id="btn" onclick="update()">点击</button>

   

<script>   

  var i=0;   

  var box=document.getElementById("aa");   

  function update(){   

    var foo={id:i};   

    var newUrl="?page="+i;   

    history.pushState(foo,'title',newUrl);   

    box.innerHTML=location.href;   

    i++;;   

  }   

  window.addEventListener('popstate', function(event) {   

    updateState(event.state);   

  });      

  

  function updateState(data){   

    box.innerHTML = data.id;   

  }   

</script> 


效果如下:




下面来具体看看两个方法

1、history.pushState()

语法:

history.pushState(stateObject,title,url)

三个参数:一个状态对象、一个标题(现在会被忽略),一个可选的URL地址。


  • 状态对象(state object)--- 一个JavaScript对象,与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态,popstate事件都会被触发,并且事件对象的state属性都包含历史记录条目的状态对象的拷贝。   

     

    任何可序列化的对象都可以被当做状态对象。因为FireFox浏览器会把状态对象保存到用户的硬盘,这样它们就能在用户重启浏览器之后被还原,我们强行限制状态对象的大小为640k。如果你向pushState()方法传递了一个超过该限额的状态对象,该方法会抛出异常。如果你需要存储很大的数据,建议使用sessionStorage或localStorage。


  • 标题(title)---FireFox浏览器目前会忽略该参数,虽然以后可能会用上。考虑到未来可能会对该方法进行修改,传一个空字符串会比较安全。或者,你也可以传入一个简短的标题,标明将要进入的状态。


  • 地址(URL)---新的历史记录条目的地址。浏览器不会在调用pushState()方法后加载该地址,但之后,可能会试图加载,例如用户重启浏览器。新的URL不一定是绝对路径;如果是相对路径,它将以当前URL为基准;传入的URL与当前URL应该是同源的,否则,pushState()会抛出异常。该参数是可选的;不指定的话则为文档当前URL。

注意:pushState()方法永远不会触发hashchange事件,即便新的地址只变更了hash。

popstate事件

每当激活的历史记录发生变化时,都会触发popstate事件。如果被激活的历史记录条目是由pushState所创建,或是被replaceState方法影响到的,popstate事件的状态属性将包含历史记录的状态对象的一个拷贝。

调用history.pushState()或者history.replaceState()不会触发popstate事件. popstate事件只会在其他浏览器操作时触发, 比如点击后退按钮(或者在JavaScript中调用history.back()方法).

直接读取当前状态

var currentState = history.state;


关注”全栈技术杂货铺“

全栈技术杂货铺