概述

window.onpopstatepopstate事件在window对象上的事件句柄.

每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发. 如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的, 则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝.

调用history.pushState()或者history.replaceState()不会触发popstate事件. popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法).

当网页加载时,各浏览器对popstate事件是否触发有不同的表现,Chrome 和 Safari会触发popstate事件, 而Firefox不会.

语法

window.onpopstate = funcRef;
  • funcRef 是个函数名.

popstate事件

假如当前网页地址为http://example.com/example.html,则运行下述代码后:

window.onpopstate = function(event) {
alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
//绑定事件处理函数.
history.pushState({page: }, "title 1", "?page=1"); //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1
history.pushState({page: }, "title 2", "?page=2"); //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2
history.replaceState({page: }, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3
history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // 弹出 "location: http://example.com/example.html, state: null
history.go(); // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}

即便进入了那些非pushState和replaceState方法作用过的(比如http://example.com/example.html)没有state对象关联的那些网页, popstate事件也仍然会被触发.

window.onpopstate的更多相关文章

  1. js 监听页面url锚点变化 window.onpopstate

    window.onpopstate = function (event) { if (location.href.indexOf('#') == -1) { location.reload(); } ...

  2. pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新

    使用Ajax可以异步获取数据,可以更高效地渲染页面. 但也存在这一些问题: 再刷新页面,页面就会变成初始的状态 浏览器的前进后退功能无效 对搜索引擎的爬虫抓取不友好 1. 早前会使用浏览器的 hash ...

  3. window.history.pushState与ajax实现无刷新更新页面url

    ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...

  4. 【使用 DOM】使用 Window 对象

    1. 获取 Window 对象 可以用两种方式获得Window对象.正规的HTML5方式是在Document对象上使用defaultView属性.另一种是使用所有浏览器都支持的全局变量window . ...

  5. 【温故而知新-Javascript】使用 Window 对象

    1. 获取 Window 对象 可以用两种方式获得Window对象.正规的HTML5方式是在Document对象上使用defaultView属性.另一种是使用所有浏览器都支持的全局变量window . ...

  6. Javascript history pushState onpopstate方法做AJAX SEO

    参考MDN: https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history https://develop ...

  7. pushState onpopstate

    转载自:http://www.cnblogs.com/gaoxue/p/3885796.html 参考MDN: https://developer.mozilla.org/zh-CN/docs/DOM ...

  8. window.history

    作者:zccst 旧版: forword() backword() go(number) HTML5中新增了 onhashchange  浏览器兼容性较好,用得较多 pushState / repla ...

  9. js pjax 和window.history.pushState,replaceState

    原文:http://blog.linjunhalida.com/blog/pjax/ github:https://github.com/defunkt/jquery-pjax 什么是pjax? 现在 ...

随机推荐

  1. selenium:断言

    在编写自动化测试脚本时,为了使“机器”去自动辨识test case的执行结果是True还是False,一般都需要在用例执行过程中获取一些信息,来判断用例的执行时成功还是失败. 判断成功失败与否,就涉及 ...

  2. RPC通信原理(未完,先睡觉)

    一 背景 OpenStack 各组件之间是通过 REST 接口进行相互通信,比如Nova.Cinder.Neutron.Glance直间的通信都是通过keystone获取目标的endpoint,即ap ...

  3. 分布式系统消息中间件——RabbitMQ的使用基础篇

    分布式系统消息中间件——RabbitMQ的使用基础篇

  4. JS中AOP的实现和运用

    在编写js的时候,我们有时会遇到针对某种场景做处理,比如在方法开始的时候校验参数,执行方法前检查权限,或是删除前给出确认提示等等.这些校验方法.权限检测.确认提示,规则可能都是相同的,在每个方法前去调 ...

  5. Bing.com在.NET Core 2.1上运行!

    Bing.com在.NET Core 2.1上运行! 相关知识请参考.netCore开发团队博客(https://blogs.msdn.microsoft.com/dotnet/) Bing.com是 ...

  6. 【C#复习总结】细说表达式树

    1 前言 系类1:细说委托 系类2:细说匿名方法 系列3:细说Lambda表达式 系列4:细说泛型委托 系列5:细说表达式树 系列6:细说事件 涛声依旧,再续前言,接着用大佬的文章作为开头. 表达式树 ...

  7. Python股票分析系列——基础股票数据操作(一).p3

    该系列视频已经搬运至bilibili: 点击查看 欢迎来到Python for Finance教程系列的第3部分.在本教程中,我们将使用我们的股票数据进一步分解一些基本的数据操作和可视化.我们将要使用 ...

  8. .Net Core 在 Linux-Centos上的部署实战教程(三)

    绑定域名,利用Nginx反向代理来操作 1.安装Nginx yun install nginx 安装成功 2.启动nginx service nginx start 报报报错了~~·      运行 ...

  9. Windows Community Toolkit 4.0 - DataGrid - Part02

    概述 在上面一篇 Windows Community Toolkit 4.0 - DataGrid - Part01 中,我们针对 DataGrid 控件的 CollectionView 部分做了详细 ...

  10. OSGI 环境搭建

    第一步,打开eclipse,新建一个plugin工程,如下图所示 第二步,输入工程的名字,并且在Target Platform中选择an OSGI framework中选中standard,如下图所示 ...