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. 第一天 格式化操作符 条件、for、while、break、continue语句

    python2和3的区别: 2中的print 不必加括号 3中的print变为函数 要加括号   2中的input不能输入字母(输入的字母被认为是变量,而之前又没定义,所以报错),默认只能计算数字,要 ...

  2. 遇到“拒绝了对对象的 EXECUTE 权限”和“无法作为数据库主体执行,因为主体 "dbo" 不存在、无法模拟这种类型的主体,或您没有所需的权限”的问题

    在将数据库从sqlserver2000迁移到2005后,原有的用户名TDS在执行存储过程是报错:“拒绝了对对象的 EXECUTE 权限”. 如网上所说,在使用的数据库的属性页->权限中给TDS添 ...

  3. 十九 Django框架,发送邮件

    全局配置settings.py EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend' #发送邮件引擎 EMAIL_USE_TLS ...

  4. SSH三大框架的搭建整合(struts2+spring+hibernate)(转)

    原文地址:http://blog.csdn.net/kyle0349/article/details/51751913  尊重原创,请访问原文地址 SSH说的上是javaweb经典框架,不能说100% ...

  5. UI层自动化测试介绍

    UI指的是用户可以用肉眼可以看到的页面. UI层自动化测试的原理.不论是web端还是移动端,原理都是一样的,就是基于页面元素的识别和定位来进行模拟用户行为. 首先识别到某个元素,比如一个按钮,然后定义 ...

  6. Javascript-- jQuery样式篇(二)

    jQuery的属性与样式 .attr()与.removeAttr() 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息.如:在img元素中,src就是元素的特性,用来标 ...

  7. 数据库中的id不会自动 替换,这个应该处理吗。怎么处理,那个是唯一主键

  8. PS 滤镜——水波 water wave

    %%%% Water wave %%%% 制作水波效果 clc; clear all; close all; addpath('E:\PhotoShop Algortihm\Image Process ...

  9. 用Rem来无脑还原Web移动端自适应的页面

    (function (win,doc){ if (!win.addEventListener) return; var html=document.documentElement; function ...

  10. bzoj 2969: 矩形粉刷 概率期望

    题目: 为了庆祝新的一年到来,小M决定要粉刷一个大木板.大木板实际上是一个W*H的方阵.小M得到了一个神奇的工具,这个工具只需要指定方阵中两个格子,就可以把这两格子为对角的,平行于木板边界的一个子矩形 ...