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 ...
随机推荐
- [java]final关键字、finally关键字与finalize()方法
final关键字: final关键字通常指的是“无法改变的”,使用“无法改变”这样修饰可能出于两个原因:设计或者效率. final可以修饰变量.方法和类. 一.final变量 一个既是static又是 ...
- 算法(Algorithms)第4版 练习 1.3.31
双向链表实现: //1.3.31 package com.qiusongde.linkedlist; public class DoublyLinkedList<Item> { priva ...
- FineReport报表使用
FineReport报表是帆软公司推出的可以嵌入java的免费报表. FineReport有2部分组成,一有c/s端的报表工具制作cpt结尾的报表文件:二是 java调用报表的web程序. 这里主要说 ...
- MATLAB卷积运算(conv、conv2)解释
来源:https://www.cnblogs.com/hyb221512/p/9276621.html 1.conv(向量卷积运算) 所谓两个向量卷积,说白了就是多项式乘法.比如:p=[1 2 3], ...
- 英语发音规则---(e)s和-(e)d的读音规则
英语发音规则---(e)s和-(e)d的读音规则 一.总结 一句话总结: 1.大部分可数名词的复数及动词第三人称单数的一般现在式,是以-(e)s结尾的? moths,glasses:digs,teac ...
- JSP分页1
分页 1.什么分页? 第N页/共M页 首页 上一页 1 2 3 4 5 6 7 8 9 10 下一页 尾页 口 go 分页的优点:只查询一页,不用查询所有页! 2.分页数据 页面的数据都是由Servl ...
- Activity间数据传输
当对Android有一些了解后,不难发现,Android程序UI框架接近于Web页面的概念.每一个用于呈现页面的组件,Activity,都是彼此独立的,它们通过系统核心来调度整合,彼此之间的通过Int ...
- Android中的优化技巧
高效地利用线程 1.在后台取消一些线程中的动作 我们知道App运行过程中所有的操作都默认在主线程(UI线程)中进行的,这样App的响应速度就会受到影响.会导致程序陷入卡顿.死掉甚至会发生系统错误. 为 ...
- yarn 官方配置推荐
http://docs.hortonworks.com/HDPDocuments/HDP2/HDP-2.6.4/bk_installing_manually_book/content/rpm-chap ...
- [BZOJ1396&2865]识别子串
bzoj1396 bzoj2865 dbzoj1396 dbzoj2865 题面 XX在进行字符串研究的时候,遇到了一个十分棘手的问题. 在这个问题中,给定一个字符串\(S\),与一个整数\(K\), ...