history.replaceState 和 history.pushState的使用和注意事项 ------------黄丕巧

HTML5引入了history.pushState()和history.replaceState()这两个方法，他们允许添加和修改history实体。同时，这些方法会和window.onpostate事件一起工作.

replaceState是替换当前的历史信息，pushState是添加一条新的历史记录
这两个方法有三个参数(state,title,url)；
第一个参数是一个json格式的参数，他可以存储我们在当前历史以后会用到的数据,也可以传null；第二个官方的介绍是说页面的标题，不过暂时用不到，直接传null就可以了；第三个参数是当前历史的url,如果为null则表示当前历史的url和上一历史的url没发生变化

　　示例：history.pushState({name:”名字”},null,”?name=张三”)；

　　注意：1.使用这两个方法时并不会直接触发onpopstate，而是存储了历史记录后前进或后退才会会触发onpopstate事件

　　　　　2.history.pushstate有安全限制，其中之一是不允许应用推动跨url-s历史起源；服务器ip的端口不同和直接在电脑本地运行的html都会报错：

时间： 2024-10-25 07:06:35

history.replaceState 和 history.pushState的使用和注意事项 ------------黄丕巧的相关文章

history replaceState/pushState

HTML5 history新增了两个属性,分别是replaceState()和pushState(),不刷新页面改变页面的url. replaceState()可以不让页面刷新的情况下改变url 用法:history.replaceState("data","页面的title","变化后的url") <body> <input type="button" value="按钮" id=&qu

HTML5 history.pushState()和history.replaceState()新增、修改历史记录用法介绍

抽空研究了下这两个新方法,确实可以解决很多问题 1.使用pushState()方法可以控制浏览器自带的返回按钮: 有时候我们想让用户点击浏览器返回按钮时,不返回,或执行其他操作,这时,就用到history.pushState()方法讲解: history.pushState(data,title,url) //每执行一次都会增加一条历史记录,浏览器在返回时,就不会返回前一个页面了, data:要设置的history.state的值,可以是任意类型的值,可根据此值进行判断执行想要的操作. ti

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

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

Uncaught SecurityError: Failed to execute 'replaceState' on 'History'

Uncaught SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL 'file:///C:/Users/Administrator/Desktop/%E5%BE%AE%E4%BF%A1/%E4%BA%91%E5%88%9B/index.html' cannot be created in a document with origin 'null'. 在引入jQ

记 history.replaceState方法一次应用解决单页面应用刷新切换页面问题

恩,以前就知道history api 新加了几个方法但是没怎么研究过,今天碰到了一个小问题,用history完美解决了,很兴奋,记录下首先说下我遇到的问题场景: 现在有两个页面 A,B A页面时提交信息页面 B页面是结果页并且 A,B 页面是同一个html文件内用 js 模板动态渲染的, 那么当结果页面动态渲染出来以后,每次刷新就会显示A页面,其实,我更想显示B页面对吧,肯定不想让用户再次提交一次,而且大多数情况下我其实并不希望用户直接进入提交信息页面的,因为如果是支付的话,会造成二次支付

history.go()和history.back()的区别是什么

history.go()和history.back()的区别是什么: go()和back()同属于history对象,在功能上也有类似之处,比如history.go(-1)和history.back()都可以返回上一页,好像是是一样的,其实还是有区别的,下面就简单介绍一下它们的区别: 一.history.go(-1): history.go(-1)返回上一页读取的是缓存中的内容,并没有刷新功能. 二.history.back(): history.back()不但可以返回上一页,而且还具有刷新功

Linux Cmd Tool 系列之—history & search command history

History cmd is for list Bash's log of the historical cmd you typed 1. List last n commands history n 2. Execute cmd No.n !n 3. Execute last cmd !! or !-1 4. Execute command n times before !-n 5. Execute the last cmd that starts with "string" !st

javascript:history.go()和History.back()的区别

<input type=button value=刷新 onclick="window.location.reload()"><input type=button value=前进 onclick="window.history.go(1)"><input type=button value=后退 onclick="window.history.go(-1)"><input type=button val

关于history.back()、history.go()回退但无法刷新页面的问题

window.history.back(); 这样确实可以做到后退的功能,但是项目中,常常并不只是后退就能完成需求,往往需要在后退的同时,刷新后退的页面信息,比如后退到首页同时刷新首页的最新数据,这样的需求通过上面这种方法就没法满足了,为了实现这个需求,我们需要使用到 document.referrer 这个方法可以取到上一个页面的具体路径,我们通过这个方法,再结合JS的跳转函数 window.location.href 就可以实现后退并且刷新的效果的,完整代码如下: window.locati