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

使用history.replaceState 控制微信返回

history.replaceState是将指定的URL替换当前的URL注意:用于替换掉的URL必须是同域的示例:先保存三个页面goto1.html<!DOCTYPE html&...
  • lyh_951128
  • lyh_951128
  • 2016-01-23 10:02:44
  • 6642

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

首先,history新增的两个方法history.replaceState()和history.pushState()方法属于HTML5浏览器新增的属性,所以IE9以下的是不支持的。 直接上...
  • u012844719
  • u012844719
  • 2013-12-02 16:43:57
  • 3843

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

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

js添加、修改url参数

//设置url中参数值 function setParam(param, value) { var query = location.search.substring(1); ...
  • ganfengguang
  • ganfengguang
  • 2015-12-28 08:56:24
  • 1774

实现页面无刷新改变URL

实现页面无刷新改变URL
  • u013758116
  • u013758116
  • 2014-07-06 21:51:55
  • 4936

js不刷新页面,改变url

loadpage的时候有对URL Parameter的判断浏览器窗口有一个history对象,用来保存浏览历史。检查浏览器是否支持 if (window.history){ // 支持Hist...
  • zhijianyangguang
  • zhijianyangguang
  • 2017-07-24 18:59:00
  • 2057

js无刷新改变页面url

  • 2016年01月12日 16:03
  • 91KB
  • 下载

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

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

html5的replaceState实现详情页到列表页的无刷新且回到上次位置

最近遇到一个用户体验问题,即从详情页回到列表页的时候,需要记住用户上次的位置,并且不刷新。 最开始返回使用的是 history.go(-1),发现并不好使,也许在有些浏览器下有效果。折腾半天,突然看...
  • qq_22959673
  • qq_22959673
  • 2016-03-30 17:16:02
  • 744

HTML5历史状态管理history API-pushState/replaceState与popstate事件

AJAX技术对我们前端产生了巨大影响 可以让我们的页面无刷新操作减少网络请求 但是它也产生了一些问题 不能够使用浏览器的前进与后退 (后退是浏览器非常常用的按钮)很久很久以前,Gmail借助i...
  • q1056843325
  • q1056843325
  • 2017-03-07 21:44:05
  • 2031
收藏助手
不良信息举报
您举报文章:HTML5新api即pushState和replaceState实现无刷新修改url
举报原因:
原因补充:

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