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无刷新实现跳转页面技术的更多相关文章

  1. HTML5无刷新修改URL

    HTML5新添加了两个api分别是pushState和replaceState,DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,可以在用户的访问记录中前进和 ...

  2. JavaScript 在不刷新或跳转页面的情况下改变当前浏览器地址栏上的网址

    JavaScript 在不刷新或跳转页面的情况下改变当前浏览器地址栏上的网址 var stateObject = {}; var title = "改变后的网址的标题"; var ...

  3. HTML5无刷新修改Url,history pushState/replaceState

    一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过history对 ...

  4. php+ajax实现无刷新动态加载数据技术

    我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术.我们发现很多网站用到这种技术,必应图片搜索.新浪微博.QQ空间等将该技术 ...

  5. Ajax技术(WEB无刷新提交数据)

    (转自:http://www.jb51.net/article/291.htm) Ajax内部交流文档一.使用Ajax的主要原因 1.通过适当的Ajax应用达到更好的用户体验: 2.把以前的一些服务器 ...

  6. 使用 pjax 实现无刷新切换页面

    一.目的 1.当打开链接的时候,页面是淡入显示,并且页面顶部会显示加载进度条,页面显示完成时,进度条加载满并且消失. 2.点击页面上的 a 标签时,显示加载进度条,并且当前页面淡出消失,当前页面淡出消 ...

  7. mvc file控件无刷新异步上传操作

    前言 上传文件应该是很常见必不可少的一个操作,网上也有很多提供的上传控件.今天遇到一个问题:input控件file无法进行异步无刷新上传.真真的感到别扭.所以就尝试这去处理了一下.主要分三个部分:上传 ...

  8. 无刷新URL 更新

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. jQuery AJAX 网页无刷新上传示例

    新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

随机推荐

  1. 排序(bzoj 4552)

    Description 在2016年,佳媛姐姐喜欢上了数字序列.因而他经常研究关于序列的一些奇奇怪怪的问题,现在他在研究一个难题 ,需要你来帮助他.这个难题是这样子的:给出一个1到n的全排列,现在对这 ...

  2. 着色方案(bzoj 1079)

    Description 有n个木块排成一行,从左到右依次编号为1~n.你有k种颜色的油漆,其中第i种颜色的油漆足够涂ci个木块.所有油漆刚好足够涂满所有木块,即c1+c2+...+ck=n.相邻两个木 ...

  3. MDK stm32 仿真

    直接选择simulator,仿真时报错 *** error 65: access violation at 0x40021000 : no 'read' permission 修改系统配置,原配置如下 ...

  4. 【SPOJ - QTREE2】树链剖分

    http://acm.hust.edu.cn/vjudge/problem/19960 题意: 有一棵N个节点的树(1<=N<=10000),N-1条边,边的编号为1~N-1,每条边有一个 ...

  5. [BZOJ1151][CTSC2007]动物园zoo 解题报告|DP|位运算

    Description 最近一直在为了学习算法而做题,这道题是初一小神犇让我看的.感觉挺不错于是写了写. 这道题如果是一条线的话我们可以构造一个DP f[i,j]表示以i为起点,i,i+1...i+4 ...

  6. poj 2312 Battle City(优先队列+bfs)

    题目链接:http://poj.org/problem?id=2312 题目大意:给出一个n*m的矩阵,其中Y是起点,T是终点,B和E可以走,S和R不可以走,要注意的是走B需要2分钟,走E需要一分钟. ...

  7. win端git连接私服仓库+上传本地项目+从服务器下载文件到win

    win端git连接私服仓库: 1.win端 检查c:/Users/用户/.ssh/目录下是否有config文件(!!!没有任何后缀名).如果没有则新建config文件,然后修改添加如下内容: Host ...

  8. 【LVS 】NAT方式实现过程

    LVS-NAT方式实现负载均衡 一.环境介绍

  9. 一段js代码的分析

    function foo(a){ console.log(a+b); b=a+2; console.log(a+b); } foo(2); foo(3); var b=3; foo(4); 结果是: ...

  10. LUA脚本中O(2)级素数查询

    --================================================================================================== ...