HTML5无刷新实现跳转页面技术
window.onpopstate
window.onpopstate是popstate事件在window对象上的事件句柄.
每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发. 如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的, 则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝.
调用history.pushState()或者history.replaceState()不会触发popstate事件. popstate事件只会在其他浏览器操作时触发, 比如点击后退按钮(或者在JavaScript中调用history.back()方法).
当网页加载时,各浏览器对popstate事件是否触发有不同的表现,Chrome 和 Safari会触发popstate事件, 而Firefox不会.
语法
01 |
window.onpopstate = funcRef; |
popstate事件
假如当前网页地址为http://example.com/example.html,则运行下述代码后:
01 |
window.onpopstate = function (event) { |
02 |
alert( "location: " + document.location + ", state: " + JSON.stringify(event.state)); |
03 |
}; |
04 |
//绑定事件处理函数. |
05 |
history.pushState({page: 1}, "title 1" , "?page=1" ); //添加并激活一个历史记录条目http://example.com/example.html?page=1,条目索引为1 |
06 |
history.pushState({page: 2}, "title 2" , "?page=2" ); //添加并激活一个历史记录条目http://example.com/example.html?page=2,条目索引为2 |
07 |
08 |
history.replaceState({page: 3}, "title 3" , "?page=3" ); //修改当前激活的历史记录条目http://ex..?page=2 变为 http://ex..?page=3,条目索引为2 |
09 |
history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}" |
10 |
history.back(); // 弹出 "location: http://example.com/example.html, state: null |
11 |
history.go(2); // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3} |
即便进入了那些非pushState和replaceState方法作用过的(比如http://example.com/example.html)没有state对象关联的那些网页, popstate事件也仍然会被触发.
HTML5无刷新实现跳转页面技术的更多相关文章
- HTML5无刷新修改URL
HTML5新添加了两个api分别是pushState和replaceState,DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,可以在用户的访问记录中前进和 ...
- JavaScript 在不刷新或跳转页面的情况下改变当前浏览器地址栏上的网址
JavaScript 在不刷新或跳转页面的情况下改变当前浏览器地址栏上的网址 var stateObject = {}; var title = "改变后的网址的标题"; var ...
- HTML5无刷新修改Url,history pushState/replaceState
一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过history对 ...
- php+ajax实现无刷新动态加载数据技术
我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术.我们发现很多网站用到这种技术,必应图片搜索.新浪微博.QQ空间等将该技术 ...
- Ajax技术(WEB无刷新提交数据)
(转自:http://www.jb51.net/article/291.htm) Ajax内部交流文档一.使用Ajax的主要原因 1.通过适当的Ajax应用达到更好的用户体验: 2.把以前的一些服务器 ...
- 使用 pjax 实现无刷新切换页面
一.目的 1.当打开链接的时候,页面是淡入显示,并且页面顶部会显示加载进度条,页面显示完成时,进度条加载满并且消失. 2.点击页面上的 a 标签时,显示加载进度条,并且当前页面淡出消失,当前页面淡出消 ...
- mvc file控件无刷新异步上传操作
前言 上传文件应该是很常见必不可少的一个操作,网上也有很多提供的上传控件.今天遇到一个问题:input控件file无法进行异步无刷新上传.真真的感到别扭.所以就尝试这去处理了一下.主要分三个部分:上传 ...
- 无刷新URL 更新
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- jQuery AJAX 网页无刷新上传示例
新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...
随机推荐
- 排序(bzoj 4552)
Description 在2016年,佳媛姐姐喜欢上了数字序列.因而他经常研究关于序列的一些奇奇怪怪的问题,现在他在研究一个难题 ,需要你来帮助他.这个难题是这样子的:给出一个1到n的全排列,现在对这 ...
- 着色方案(bzoj 1079)
Description 有n个木块排成一行,从左到右依次编号为1~n.你有k种颜色的油漆,其中第i种颜色的油漆足够涂ci个木块.所有油漆刚好足够涂满所有木块,即c1+c2+...+ck=n.相邻两个木 ...
- MDK stm32 仿真
直接选择simulator,仿真时报错 *** error 65: access violation at 0x40021000 : no 'read' permission 修改系统配置,原配置如下 ...
- 【SPOJ - QTREE2】树链剖分
http://acm.hust.edu.cn/vjudge/problem/19960 题意: 有一棵N个节点的树(1<=N<=10000),N-1条边,边的编号为1~N-1,每条边有一个 ...
- [BZOJ1151][CTSC2007]动物园zoo 解题报告|DP|位运算
Description 最近一直在为了学习算法而做题,这道题是初一小神犇让我看的.感觉挺不错于是写了写. 这道题如果是一条线的话我们可以构造一个DP f[i,j]表示以i为起点,i,i+1...i+4 ...
- poj 2312 Battle City(优先队列+bfs)
题目链接:http://poj.org/problem?id=2312 题目大意:给出一个n*m的矩阵,其中Y是起点,T是终点,B和E可以走,S和R不可以走,要注意的是走B需要2分钟,走E需要一分钟. ...
- win端git连接私服仓库+上传本地项目+从服务器下载文件到win
win端git连接私服仓库: 1.win端 检查c:/Users/用户/.ssh/目录下是否有config文件(!!!没有任何后缀名).如果没有则新建config文件,然后修改添加如下内容: Host ...
- 【LVS 】NAT方式实现过程
LVS-NAT方式实现负载均衡 一.环境介绍
- 一段js代码的分析
function foo(a){ console.log(a+b); b=a+2; console.log(a+b); } foo(2); foo(3); var b=3; foo(4); 结果是: ...
- LUA脚本中O(2)级素数查询
--================================================================================================== ...