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. HTTP协议中的ContenType类型大全(转)

    ".*"="application/octet-stream"".001"="application/x-001"&qu ...

  2. springmvc4+hibernate4+activiti5.18(Maven)

    项目下载地址: http://files.cnblogs.com/files/walk-the-Line/springmvc_activiti5.18_hibernate4.zip

  3. Linux 远程登录——(九)

    Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE /* Style Definitions */ table.MsoNormalTable ...

  4. 【Sqlite3】SQLITE3使用总结(转)

    原文转自 https://www.cnblogs.com/wenxp2006/archive/2012/06/04/2535169.html SQL语句操作 介绍如何用sqlite 执行标准 sql  ...

  5. Linux利用list_head结构实现双向链表

    原文地址:http://www.cnblogs.com/bastard/archive/2012/10/19/2731107.html 通常实现双向链表的数据结构: struct list_node1 ...

  6. Python/CMD 文件备份

    1.使用Python压缩文件并另存 import zipfile, os #备份文件ZIP格式: folder 目标文件夹 : Targetfolder:另存地址 def backuptozip(fo ...

  7. 某dp题

    [NOI联考by ysy]庆典 2016年6月17日1,1040 [题目描述] 战狂在昌和帝国的首都法法城召开了庆典,向一万名最杰出的士兵分发了用魔法猪做的猪肉饺子,士兵们吃了猪肉饺子后,战斗力大幅提 ...

  8. Unicode(UTF-8, UTF-16)令人混淆的概念----我看完了 不错

    来自:http://www.cnblogs.com/kingcat/archive/2012/10/16/2726334.html ---------------------------------- ...

  9. [thinkphp]验证码不显示: 图像因存在错误无法显示

    我只想说,该死的BOM FUKKKKK!!!!!!!!

  10. HSV与RGB的相互转换的公式

    H参数表示色彩信息,即所处的光谱颜色的位置.该参数用一角度量来表示,红.绿.蓝分别相隔120度.互补色分别相差180度.纯度S为一比例值,范围从0到1,它表示成所选颜色的纯度和该颜色最大的纯度之间的比 ...