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

　　1,首先我面临一个需求，页面回退时需要知道来之前的页面状态。很简单，回退时在url里赋参数即可。问题是在ipad上，回退按钮是安卓那边的，我控制不了。只好采用js无刷新修改url历史记录，来告诉服务器我回去时要给我保持神秘状态。

　　先上代码，再解释这两个api。

　　

var url=window.location.href;
var length=url.length;
newur=url+"****";
history.replaceState(null, "",newurl);

　　2,HTML5新添加了两个api分别是pushState和replaceState，DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取，可以在用户的访问记录中前进和后退，我们可以开始操作这个历史记录堆栈。真是极好的。

　　push是插入，replace是替换上一个url历史记录。

　　还发现pushState有一个好用处。Ajax+pushState可以实现翻页无刷新的动作。本来ajax就是无刷新局部请求页面了，但如果你想要保持一个正确的状态，来作返回的地址的话。你就要在每次ajax请求之后去pushState一个合适的地址到历史记录中。

（如有不准确的地方，欢迎指正）

时间： 2024-10-11 04:37:41

HTML5新api即pushState和replaceState实现无刷新修改url的相关文章

Html5无刷新修改Url

Html5无刷新修改Url,history pushState/replaceState (2014-03-01 01:11:20) 转载▼ 标签: it   一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通 过history对象提供对览器历史记录的访问能力.它暴露了一些非常有用的方法和属性,让你在历史记录中自由前进和后退. 1.历史记录的前进和后退 在历史记录中

HTML5实现无刷新修改URL

前言 今天在做一个vue的搜索功能,需要从搜索结果页面跳转到细节页面,然后点击返回还能返回到刚刚的结果页面,如果只用window.history.go(-1)当然会重新刷新搜索页面,当然是不行的. 我尝试了俩种方式来修改url: window.location.href,拼接一个搜索的key值,点击搜索的同时,刷新了页面,url改变了,功能是实现了,可是bug来了...,搜索页面闪烁后才进入结果页,而结合不跳转页面就不会发生闪烁的情况,所以当页面刷新时,vue实例都会被重新加载. window.

通过history.pushState无刷新改变url

背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越来越多的网站采用ajax来加载资源.因为异步加载的特性,地址栏上的资源路径没有被改变,随之而来的问题就是页面的状态无法被保存.这导致我们难以通过熟悉的方式(点击浏览器前进/后退按钮),在前后的页面状态间进行切换. 为了解决ajax页面状态不能返回的问题,人们想出了一些曲线救国的方法,比如利用浏览器hash的特性,将新的资源路径伪装成锚点,通过onhash

HTML5新特性【pushState】和【replaceState】

近来在处理浏览器禁刷功能时,用到一个新属性:history.pushState(): 官方解释如下: history.pushState()方法和history.replaceState()方法,它们允许你逐条地添加和修改历史记录条目.这些方法可以协同window.onpopstate事件一起工作. 使用 history.pushState() 会改变 referrer 的值,而在你调用方法后创建的 XMLHttpRequest 对象会在 HTTP 请求头中使用这个值.referrer的值则是创

window.history.pushState与ajax实现无刷新更新页面url

ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history,点击前进后退按钮会触发popstate事件. 这些方法可以协同window.onpopstate事件一起工作. 改变url的demo 本页是foo.html,url改变成bar.html,内容却不变 <!DOCTYPE html> <html> <head> <me

HTML5新特性展示利用history.replaceState()修改历史记录

在上一篇文章中介绍history.pushState()的时候,我们提到location.hash存在的3个问题.第一个问题:url会发生改变,这个很容易理解.现在我们看下第二个问题和第三个问题,即如何修改浏览器的历史记录,如何让历史记录存储更多状态相关的信息.状态相关的信息上一篇博客其实已经很容易看出来了,history.pushState()的第一个参数是javascript对象,我们当然可以在这个对象中存放任何我们想要的数据.本文我们主要看一下,如何利用histroy.replaceSta

history.pushState 实现ajax无刷新更改url

暂时没啥心得,直接上例子. 1 <html> 2 <head> 3 <title> 4 fasd 5 </title> 6 <script> 7 window.addEventListener('popstate', function(e){ 8 if (history.state){ 9 var state = e.state; 10 console.log(state.title); 11 } 12 }, false); 13 14 func

8. H5 pushState/popstate + ajax开发无刷新页面

css *{ margin: 0; padding: 0; } .m-a{ float: left; width: 100px; } .m-a a{ display: block; height: 30px; line-height: 30px; text-align: center; border: 1px solid #000; } .m-a a.on{ background-color: #ccc; } .con{ float: left; width: 300px; height: 30

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

尽 管是上面讲到的<JavaScript高级程序设计>(第二版)中提到,BOM中的location.path/query…… (window.location)在通过JavaScript更改以后,浏览器都会通过刷新来到达你更改后的URL(location的意思就是位 置..) 而在JavaScript MVC开始流行之后,通过刷新来修改URL的方法,不禁让人感到烦躁.然而HTML5中就制定了一个这样的API,可以通过方法的方式来修改URL,而又不会使浏览器刷新,就是History API. 熟