html5 history 信息api pushState
这个功能可以进行传参,还可以解决ajax无法前进和倒退的问题
首先,history新增的两个方法history.replaceState()和history.pushState()方法属于HTML5浏览器新增的属性,所以IE9以下的是不支持的。
直接上代码:
history.replaceState() 顾名思义就是替换的意思,所以它的作用就是替换当前地址栏的url
- <!DOCTYPE HTML>
- <head>
- <script src="jquery-1.8.2.min.js"></script>
- <style>
- </style>
- <script>
- $(function(){
- $("#bt").click(function(){
- history.replaceState({data:111},"1222","aa.html");
- return false;
- });
- })
- </script>
- </head>
- <body class="sapUiBody">
- <input type="button" id="bt" value="show">
- </body>
点击按钮后,可以看到页面地址栏的地址变了,但是页面并没有刷新。
history.replaceState(data,"页面的title","需要改变的url") 接收三个参数
history.pushState() 看到push大家首先应该想到的是数组,没错,这个方法就是往浏览器的history里压入一条url,就像数据结构里的栈一样,这个压入的url会在栈
的最顶端,当你点击浏览器的前进或者倒退按钮时,便会拿出栈顶的url来定位,从而达到改变history的作用但是并不刷新!
- <!DOCTYPE HTML>
- <head>
- <script src="jquery-1.8.2.min.js"></script>
- <style>
- </style>
- <script>
- $(function(){
- $("#bt").click(function(){
- history.pushState({data:111},"1222","aa.html");
- history.pushState({data:111},"1222","ab.html");//多压入几条
- return false;
- });
- })
- </script>
- </head>
- <body class="sapUiBody">
- <input type="button" id="bt" value="show">
- </body>
其次是
window.addEventListener('popstate', function(event) {
console.log(event.state);//data
});
还记得上面的pushState方法么,当你往history的栈里通过调用这个方法压入多条数据时,并且你通过点击浏览器的前进倒退按钮进行改变的时候,这个事件就触发了,然后就
是event.state就是上面方法的第一个参数data,并且是和url一一对应的,这样就实现了传值
- <!DOCTYPE HTML>
- <head>
- <script src="jquery-1.8.2.min.js"></script>
- <style>
- </style>
- <script>
- $(function(){
- $("#bt").click(function(){
- history.pushState({data:111},"1222","aa.html");
- history.pushState({data:111},"1222","ab.html");//多压入几条
- return false;
- });
- window.addEventListener('popstate', function(event) {
- console.log(event.state);
- });
- })
- </script>
- </head>
- <body class="sapUiBody">
- <input type="button" id="bt" value="show">
- </body>
最后,通过这种方法可以在popstate的事件里写自己的逻辑了,如发送ajax等
html5 history 信息api pushState的更多相关文章
- HTML5 history新特性pushState、replaceState
DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,让你可以在用户的访问记录中前进和后退. 从HTML5开始,我们可以开始操作这个历史记录堆栈. 1.Histo ...
- HTML5 history新特性pushState、replaceState,popstate
http://blog.csdn.net/tianyitianyi1/article/details/7426606 https://developer.mozilla.org/zh-CN/docs/ ...
- HTML5 History API 实现无刷新跳转
在HTML5中, 1. 新增了通过JS在浏览器历史记录中添加项目的功能. 2. 在不刷新页面的前提下显示改变浏览器地址栏中的URL. 3. 添加了当用户单击浏览器的后退按钮时触发的事件. 通过以上三 ...
- HTML5 History API实现无刷新跳转
在HTML5中, 新增了通过JS在浏览器历史记录中添加项目的功能. 在不刷新页面的前提下显示改变浏览器地址栏中的URL. 添加了当用户单击浏览器的后退按钮时触发的事件. 通过以上三点,可以实现在不刷新 ...
- HTML5 history API实践
一.history API知识点总结 在HTML4中,我们已经可以使用window.history对象来控制历史记录的跳转,可以使用的方法包括: history.forward();//在历史记录中前 ...
- 转: html5 history api详解~很好的文章
从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残按到了F5.然后,页面刷新了,评论又回到了第一页 ...
- HTML5 History API让ajax能回退到上一页
HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL.这个功能很有用,例如通过一段JavaScript代码局部加载页面的内容,你希望通过改变当前页面的 ...
- window.history的跳转实质-HTML5 history API 解析
在上一浏览器跳转行为的测试中,我们看到了通过不同的方法操作浏览器跳转时,它的刷新表现有所不同,在这一文章中,将看看,为何会产生这样的不同?其背后的实质是什么?浏览器的访问历史记录到底是如何运作的呢? ...
- HTML5 history API,创造更好的浏览体验
HTML5 history API有什么用呢? 从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残 ...
随机推荐
- The POM for XXX is invalid, transitive dependencies (if any) will not be available解决方案
今天,某个开发的环境在编译的时候提示警告The POM for XXX is invalid, transitive dependencies (if any) will not be availab ...
- Huffman Implementation with Python
Huffman Implementation with Python 码表 Token Frequency a 10 e 15 i 12 s 3 t 4 space 13 n 1 生成 Huffman ...
- RadioButton在数据列表中实现单选功能
在服务器端动态生成的name总是不断变化,故需手动实现单选 ; <html xmlns="http://www.w3.org/1999/xhtml"> <head ...
- 【python001-IDLE】
一.python的下载地址:http://www.python.org 二. python的注释:# 三.>>> print("i love python")i ...
- upc组队赛1 黑暗意志【stl-map】
黑暗意志 题目描述 在数千年前潘达利亚从卡利姆多分离之时,迷雾笼罩着这块新形成的大陆,使它不被外来者发现.迷雾同样遮蔽着这片大陆古老邪恶的要塞--雷神的雷电王座.在雷神统治时期,他的要塞就是雷电之王力 ...
- C语言变量的作用域和存储类型
1.动态局部变量:也称局部变量.自动变量,是指在函数内部定义的自动变量,不带static修饰,作用域是定义该变量的子程序.在退出函数后,变量自带内存会自动释放. 2.静态局部变量:是指在函数内部定义的 ...
- ASP.NET Core2.1 中如何使用 Cookie和Session
https://blog.csdn.net/canduecho/article/details/80651853 ASP.NET Core2.1的官方项目模板在创建的Razor Pages和MVC项目 ...
- 题解——POJ 2234 Matches Game
这道题也是一个博弈论 根据一个性质 对于\( Nim \)游戏,即双方可以任取石子的游戏,\( SG(x) = x \) 所以直接读入后异或起来输出就好了 代码 #include <cstdio ...
- (zhuan) Building Convolutional Neural Networks with Tensorflow
Ahmet Taspinar Home About Contact Building Convolutional Neural Networks with Tensorflow Posted on a ...
- 常用处理数组、字符串API → forEach every some sort map filter slice split indexOf concat substring substr splice join toString replace
Object与Array的语法糖 var arr = [1,2,3]; // [] 是 new Array(1,2,3) 的语法糖(简写) var obj = {'name':2,'age':3}; ...