HTML5新增的history.replaceState()/pushState(),实现无刷新修改url

原创 2013年12月02日 16:43:57

首先,history新增的两个方法history.replaceState()和history.pushState()方法属于HTML5浏览器新增的属性,所以IE9以下的是不支持的。


直接上代码:

history.replaceState() 顾名思义就是替换的意思,所以它的作用就是替换当前地址栏的url

<!DOCTYPE HTML>
<head>
  <script src="jquery-1.8.2.min.js"></script>
	
<style>

</style>
<script>
$(function(){
	$("#bt").click(function(){
		history.replaceState({data:111},"1222","aa.html");
		return false;
	});
})

</script>
</head>
<body class="sapUiBody">
  	<input type="button" id="bt" value="show">
	
</body>
点击按钮后,可以看到页面地址栏的地址变了,但是页面并没有刷新。

history.replaceState(data,"页面的title","需要改变的url") 接收三个参数

history.pushState() 看到push大家首先应该想到的是数组,没错,这个方法就是往浏览器的history里压入一条url,就像数据结构里的栈一样,这个压入的url会在栈

的最顶端,当你点击浏览器的前进或者倒退按钮时,便会拿出栈顶的url来定位,从而达到改变history的作用但是并不刷新!


<!DOCTYPE HTML>
<head>
  <script src="jquery-1.8.2.min.js"></script>
	
<style>

</style>
<script>
$(function(){
	$("#bt").click(function(){
		history.pushState({data:111},"1222","aa.html");
		history.pushState({data:111},"1222","ab.html");//多压入几条
		return false;
	});
})

</script>
</head>
<body class="sapUiBody">
  	<input type="button" id="bt" value="show">
	
</body>

其次是
window.addEventListener('popstate', function(event) {     
   console.log(event.state);//data 
});

还记得上面的pushState方法么,当你往history的栈里通过调用这个方法压入多条数据时,并且你通过点击浏览器的前进倒退按钮进行改变的时候,这个事件就触发了,然后就

event.state就是上面方法的第一个参数data,并且是和url一一对应的,这样就实现了传值


<!DOCTYPE HTML>
<head>
  <script src="jquery-1.8.2.min.js"></script>
	
<style>

</style>
<script>
$(function(){
	$("#bt").click(function(){
		history.pushState({data:111},"1222","aa.html");
		history.pushState({data:111},"1222","ab.html");//多压入几条
		return false;
	});
	
	window.addEventListener('popstate', function(event) {     
		console.log(event.state);  
		});
})

</script>
</head>
<body class="sapUiBody">
  	<input type="button" id="bt" value="show">
	
</body>

最后,通过这种方法可以在popstate的事件里写自己的逻辑了,如发送ajax等



HTML5 history新特性pushState、replaceState

DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,让你可以在用户的访问记录中前进和后退。 从HTML5开始,我们可以开始操作这个历史记录堆栈。   1....

Html5使用history对象history.pushState()和history.replaceState()方法添加和修改浏览历史记录

原文:https://www.studyscript.com/Post/index/id/3018.html?page=3 正文~ 概述 浏览器窗口有一个history对象,用来保存...

使用ajax和history.pushState无刷新改变页面URL

表现 如果你使用chrome或者firefox等浏览器访问本博客、github.com、plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的U...
  • oyiboy
  • oyiboy
  • 2015年03月14日 12:43
  • 35695

HTML5历史状态管理history API-pushState/replaceState与popstate事件

AJAX技术对我们前端产生了巨大影响 可以让我们的页面无刷新操作减少网络请求 但是它也产生了一些问题 不能够使用浏览器的前进与后退 (后退是浏览器非常常用的按钮)很久很久以前,Gmail借助i...

HTML5 API—无刷新更新地址 history.pushState/replaceState方法(例子)

转自:http://www.cnblogs.com/maorongmaomao/archive/2012/02/20/2359341.html 尽管是上面讲到的《JavaScript高级程序设计》(...

HTML5新api即pushState和replaceState实现无刷新修改url

1,首先我面临一个需求,页面回退时需要知道来之前的页面状态。很简单,回退时在url里赋参数即可。问题是在ipad上,回退按钮是安卓那边的,我控制不了。只好采用js无刷新修改url历史记录,来告诉服务器...
  • ywj5200
  • ywj5200
  • 2016年11月24日 11:36
  • 713

HTML5无刷新修改Url,history pushState/replaceState

一、认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象。window对象通过history...

React Router中pushState的使用方法

带参数页面跳转 this.props.history.pushState({passParam: true}, "/targetURL"); 第一个参数为你页面跳转时,需要传递的参数,如果不需要传参数...

history.pushState() 和 history.replaceState() 方法

Internet Explorer 10 引入了对 HTML5 草案规范的历史记录界面的支持,该历史记录界面包括用来管理站点的历史记录堆栈和 URL 的方法。 这个控件可以为最终用户提供他们期望从“后...
  • li_star
  • li_star
  • 2016年08月12日 10:42
  • 6420

使用history.replaceState 控制微信返回

history.replaceState是将指定的URL替换当前的URL 注意:用于替换掉的URL必须是同域的 示例: 先保存三个页面 goto1.html goto1 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5新增的history.replaceState()/pushState(),实现无刷新修改url
举报原因:
原因补充:

(最多只允许输入30个字)