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. 第六篇 javascript面向对象

    一.闭包 闭包是指可以包含自由(未绑定到特定对象)变量的代码块. 「闭包」,是指拥有多个变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 闭包是个函数,而它「记 ...

  2. LINQ 学习路程 -- 查询语法 LINQ Query Syntax

    1.查询语法 Query Syntax: from <range variable> in <IEnumerable<T> or IQueryable<T> ...

  3. java:类集操作总结

    java:类集操作总结 1.List接口允许有重复的元素,Set接口中不允许有重复的元素 2.ArrayList,和Vector的区别 3.set依靠equals和hashCode区分 4.TreeS ...

  4. Java集合类--->入门上篇

    最近我又在研究Java语言,这是第五次还是第六次学习Java的集合类,你也许会惊讶为什么这么多次?哈哈,因为之前的我没有记录下来,忘记了,当然最主要还是觉得自己毅力不够,没有坚持.那么,这次我将换一种 ...

  5. PHP中怎样让数组以字母为键值来递增

    //小写字母 $key = 97; $arr = array(); for($i=1;$i<=26;$i++){ $arr[chr($key)] = $i; $key++; } print_r( ...

  6. 了解fiddler:实现简单的抓包测试

    fiddler是一款轻型的抓包软件 本文介绍几个常用的功能:(相信图片更直观点,上图片,右键在新标签页中打开,查看高清大图) 通过composer,我们可以修改http头部信息,修改post(),ge ...

  7. tensorflow CUDA 9.0安装成功

    berli@berli-dev:~/tensorflow$ bazel-bin/tensorflow/examples/label_image/label_image 2017-12-18 00:04 ...

  8. vc中播放mp3文件的方法小结

    一般播放MP3常见的有两种方法,一种是自己解码,另外一种用系统的库,比如MCI,当然如果可以用控件直接用个控件会更方便. 1.      使用mci #include <windows.h> ...

  9. 2017-2018-1 20179215《Linux内核原理与分析》第四周作业

    本次的实验是使用gdb跟踪调试内核从start_kernel到init进程启动,并分析启动的过程. 1.首先是在实验楼虚拟机上进行调试跟踪的过程. cd LinuxKernel qemu -kerne ...

  10. bzoj 3916: friends 瞎搞

    题目: 有三个好朋友喜欢在一起玩游戏,A君写下一个字符串S,B君将其复制一遍得到T,C君在T的任意位置(包括首尾)插入一个字符得到U.现在你得到了U,请你找出S. 题解: 发现字符串的长度一定为奇数. ...