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一个合适的地址到历史记录中。

(如有不准确的地方,欢迎指正)

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

  1. HTML5无刷新修改URL

    HTML5新添加了两个api分别是pushState和replaceState,DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,可以在用户的访问记录中前进和 ...

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

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

  3. HTML5实现无刷新修改URL

    前言 今天在做一个vue的搜索功能,需要从搜索结果页面跳转到细节页面,然后点击返回还能返回到刚刚的结果页面,如果只用window.history.go(-1)当然会重新刷新搜索页面,当然是不行的. 我 ...

  4. history.pushState 实现浏览器页面不刷新修改url链接

    最近遇到了在不刷新页面的情况下修改浏览器url链接的需求,遂求助于万能的度娘,最终通过history.pushState()完美解决问题.现在将我理解的一些内容分享一下,不对的地方欢迎大家指出. 在使 ...

  5. 通过history.pushState无刷新改变url

    通过history.pushState无刷新改变url 背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越 ...

  6. history.pushState无刷新改变url

    通过history.pushState无刷新改变url 背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越 ...

  7. [Web] HTML5新特性history pushState/replaceState解决浏览器刷新缓存

    转载: https://www.jianshu.com/p/cf63a1fabc86 现实开发中,例如‘商品列表页’跳转‘商品详情页’,返回时,不重新加载刷新页面,并且滚动到原来的位置. 1.首先,先 ...

  8. H5,API的pushState(),replaceState()和popstate()用法

    pushState和replaceState是H5的API中新添加的两个方法.通过window.history方法来对浏览器历史记录的读写. pushState和replaceState 在 HTML ...

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

    ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...

随机推荐

  1. debian下为stm32f429i-discovery编译uboot、linux内核和根文件系统

    交叉编译器:arm-uclinuxeabi-2010q1 交叉编译器下载下来后解压,然后将其中bin文件夹路径加入到PATH变量中. 根据<debian下烧写stm32f429I discove ...

  2. JavaScript在执行代码之前会校验代码,声明变量提前至当前作用域最前面。

    var name = 123; function getName(){ console.log(name); } getName(); 输出123 -------------------------- ...

  3. TMS scripter使用心得

    TMS scripter提供了在delphi应用程序中使用pascal 脚本的能力.TMS scripter同时提供了一个工具SSImport.exe,用来把打算在应用程序中使用的类自动生成wrape ...

  4. XP最高支持IE8

    1.https://www.microsoft.com/zh-CN/download/details.aspx?id=24488 适用于 Windows XP 的 Internet Explorer ...

  5. Jquery的ajax获取action中的返回值

    js部分: function check() {  $.ajax({     type : "POST",     url : "myCloudWantseeListHD ...

  6. PL/SQL Developer 的 SQL 编辑窗口显示行号

    版权声明:本文为博主原创文章,未经博主允许不得转载. 一直奇怪为什么 PL/SQL 6 系列的版本可以显示行号,为什么到了 7 .8 版本之后反而还不行了?而且我都已经设置了“显示行号”的呀. 如图: ...

  7. unit Base64Unit;

    unit Base64Unit; unit Base64Unit; //Download by http://www.codefans.net interface uses Classes, SysU ...

  8. Python习题-登录

    写一个登录的程序,失败次数最多为3次,输入账号.密码错误,提示账号/密码错误.失败三次程序退出,输入正确,提示欢迎xxx登录 i=0while (i<3): username = input(' ...

  9. Linux基本语法

    Shell编程 摘要: Shell历史 Shell的作用是解释用户的命令,用户输入一条命令,Shell就解释执行一条,这条方式称为交互式(interactive),Shell还有一种执行命令的方式称为 ...

  10. Javascript-- jQuery事件篇(2)

    jQuery表单事件之blur与focus事件 单处理事件focusin事件与focusout事件,同样用于处理表单焦点的事件还有blur与focus事件 它们之间的本质区别: 是否支持冒泡处理 举个 ...