javascript不刷新页面替换地址栏url的方法replaceState()和pushState()

Web前端开发 / 2494 次阅读

replaceState()和pushState()是HTML5中history对象新添加的两个方法，用来在浏览历史中添加或修改记录，通过这两个方法可以实现替换浏览器地址栏url而不刷新网页。

语法 

history.replaceState(stateObj, title[, url]);
history.pushState(stateObj, title[, url]);

两上方法的参数完全一样，区别是两者是否会修改浏览历史中当前纪录。其中replaceState不会有历史记录，pushState有历史记录。

参数

  • stateObj - 状态对象是一个 JavaScript 对象，一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数，如果不需要这个对象，此处可以填null。（注意：该参数是对像，如果直接写参数，需要带{}符号的对象）
  • title - 新页面的标题，但目前的浏览器会忽略这个值，以后浏览器更新也许会支持，建议填null或空值。
  • url - 历史记录实体的 URL，即新的网址，浏览器的地址栏将显示这个网址，必须与当前页面URL是同源，即同一个域名，否则会抛出一个异常。

示例 

if(!!(window.history && history.replaceState)){ //判断当前浏览器是否支持
	// 支持History API
	window.history.replaceState('', '', '#page2'); 
	//或
	window.history.replaceState({path: '#page1'}, '', '#page2'); //path是自定义的
	//这句代码会在当前url末尾中追加#page2，但不会跳转到锚点或刷新页面
}else{
	// 不支持
	alert('浏览器版本太低，建议更新升级浏览器');
}

pushState()方法把代码中的replaceState换成pushState即可。