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

转载 2016年11月24日 11:36:23

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

实现页面无刷新改变URL

实现页面无刷新改变URL

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

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

js不刷新页面,改变url

loadpage的时候有对URL Parameter的判断浏览器窗口有一个history对象,用来保存浏览历史。检查浏览器是否支持 if (window.history){ // 支持Hist...

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

在上一篇文章中介绍history.pushState()的时候,我们提到location.hash存在的3个问题。第一个问题:url会发生改变,这个很容易理解。现在我们看下第二个问题和第三个问题,即如...

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

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

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

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

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

来源URL:http://blog.sina.com.cn/s/blog_70a3539f0101ecyg.html 一、认识window.history window.history表示wi...

HTML5 History API实现无刷新跳转

在HTML5中,   1. 新增了通过JS在浏览器历史记录中添加项目的功能。       2. 在不刷新页面的前提下显示改变浏览器地址栏中的URL。       3. 添加了当用户单...

HTML5无刷新修改URL:利用 History API 无刷新更改地址栏

HTML5 新增的历史记录 API 可以实现无刷新更改地址栏链接,配合 AJAX 可以做到无刷新跳转。 简单来说:假设当前页面为renfei.org/,那么执行下面的 JavaScript 语句...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5新api即pushState和replaceState实现无刷新修改url
举报原因:
原因补充:

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