HTML5新api即pushState和replaceState实现无刷新修改url
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的更多相关文章
- HTML5无刷新修改URL
HTML5新添加了两个api分别是pushState和replaceState,DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,可以在用户的访问记录中前进和 ...
- HTML5无刷新修改Url,history pushState/replaceState
一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过history对 ...
- HTML5实现无刷新修改URL
前言 今天在做一个vue的搜索功能,需要从搜索结果页面跳转到细节页面,然后点击返回还能返回到刚刚的结果页面,如果只用window.history.go(-1)当然会重新刷新搜索页面,当然是不行的. 我 ...
- history.pushState 实现浏览器页面不刷新修改url链接
最近遇到了在不刷新页面的情况下修改浏览器url链接的需求,遂求助于万能的度娘,最终通过history.pushState()完美解决问题.现在将我理解的一些内容分享一下,不对的地方欢迎大家指出. 在使 ...
- 通过history.pushState无刷新改变url
通过history.pushState无刷新改变url 背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越 ...
- history.pushState无刷新改变url
通过history.pushState无刷新改变url 背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越 ...
- [Web] HTML5新特性history pushState/replaceState解决浏览器刷新缓存
转载: https://www.jianshu.com/p/cf63a1fabc86 现实开发中,例如‘商品列表页’跳转‘商品详情页’,返回时,不重新加载刷新页面,并且滚动到原来的位置. 1.首先,先 ...
- H5,API的pushState(),replaceState()和popstate()用法
pushState和replaceState是H5的API中新添加的两个方法.通过window.history方法来对浏览器历史记录的读写. pushState和replaceState 在 HTML ...
- window.history.pushState与ajax实现无刷新更新页面url
ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...
随机推荐
- mini2440移植uboot 2014.04(四)
我修改的代码已经上传到github上,地址:https://github.com/qiaoyuguo/u-boot-2014.04-mini2440.git 参考文章: <mini2440移植u ...
- 用用OGRE1.74搭建游戏框架(转载)
用OGRE1.74搭建游戏框架(一) 新版的OGRE出来了,不知什么原因抛弃了CEGUI.国内的教程好像也更新比较少了,在官网上还是发现不少资料的,现在参考官网上的一些资料来搭建一个游戏的框架. 参考 ...
- Codeforces 459E Pashmak and Graph:dp + 贪心
题目链接:http://codeforces.com/problemset/problem/459/E 题意: 给你一个有向图,每条边有边权. 让你找出一条路径,使得这条路径上的边权严格递增. 问你这 ...
- 给GridView删除列添加删除提示
首先设置CommandField,把ShowEditButton.ShowDeleteButton属性都设置为true,也可以只设置ShowDeleteButton属性,那样下面的代码你要修 ...
- PHP面试题,自己几斤几两,看看就知道了
0.简单做一下自我介绍,? 然后谈一下近三年来你的得意之作? 1.面试官看过你的简历,会问一些你做的项目的用户量.pv.吞吐量.相关难点和解决方法等 2.数据库设计经验,为什么进行分表? 分库? 一般 ...
- Hibernate学习---第十四节:hibernate之session线程安全
1.hibernate.cfg.xml 文件中添加如下代码开启线程安全: <property name="hibernate.current_session_context_class ...
- Python基础-常用模块OS
模块:一个python文件就是一个模块,模块分三种: 1,标准模块,也就是python自带的模块,例如import time,random,string等等 2,第三方模块,这种模块需要自己安装才能 ...
- QListWidget列表控件:当鼠标选中某行时,系统会自动设置选中的行的行号,用currentRow()返回回来,没有setCheck或setSelect类似函数
列表控件的设计思路: 只有QListWidgetItem自己能改变自己的状态(如checked,selected,颜色等)状态,QListWidget是无法改变其项的状态的. 列表控件是被动接受子项的 ...
- redis学习--Hashes数据类型
本文转自:http://www.cnblogs.com/stephen-liu74/archive/2012/03/19/2352932.html 一.概述: 我们可以将Redis中的Hashes类型 ...
- ONVIF协议测试工具 ONVIF Device Test Tool 29 12.12 最新版
ONVIF协议测试工具 ONVIF Device Test Tool 29 12.12 最新版 包含文档和工具,本人亲测,好用! http://download.csdn.net/detail/li_ ...