window.onpopstate
概述
window.onpopstate
是popstate
事件在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的更多相关文章
- js 监听页面url锚点变化 window.onpopstate
window.onpopstate = function (event) { if (location.href.indexOf('#') == -1) { location.reload(); } ...
- pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新
使用Ajax可以异步获取数据,可以更高效地渲染页面. 但也存在这一些问题: 再刷新页面,页面就会变成初始的状态 浏览器的前进后退功能无效 对搜索引擎的爬虫抓取不友好 1. 早前会使用浏览器的 hash ...
- window.history.pushState与ajax实现无刷新更新页面url
ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...
- 【使用 DOM】使用 Window 对象
1. 获取 Window 对象 可以用两种方式获得Window对象.正规的HTML5方式是在Document对象上使用defaultView属性.另一种是使用所有浏览器都支持的全局变量window . ...
- 【温故而知新-Javascript】使用 Window 对象
1. 获取 Window 对象 可以用两种方式获得Window对象.正规的HTML5方式是在Document对象上使用defaultView属性.另一种是使用所有浏览器都支持的全局变量window . ...
- Javascript history pushState onpopstate方法做AJAX SEO
参考MDN: https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history https://develop ...
- pushState onpopstate
转载自:http://www.cnblogs.com/gaoxue/p/3885796.html 参考MDN: https://developer.mozilla.org/zh-CN/docs/DOM ...
- window.history
作者:zccst 旧版: forword() backword() go(number) HTML5中新增了 onhashchange 浏览器兼容性较好,用得较多 pushState / repla ...
- js pjax 和window.history.pushState,replaceState
原文:http://blog.linjunhalida.com/blog/pjax/ github:https://github.com/defunkt/jquery-pjax 什么是pjax? 现在 ...
随机推荐
- 一:Neutron实现网络虚拟化
一 云计算时代数据中心物理网络的问题 数据中心虚拟化成为了趋势,最典型的场景莫过于:对数据中心的服务器进行虚拟化,来提高资源利用率,同时降低单位能耗. 但是,随着数据中心虚拟化程度的不断提高.虚拟化服 ...
- IntelliJ IDEA 破解方法
2017版破解方法: 1. 到网站http://idea.lanyus.com/,按要求修改电脑HOST,获取注册码: 使用前请将“0.0.0.0 account.jetbrains.com”添加到h ...
- 2018年计划小目标(9月)PMP
从6.23结束敏捷的系统贯穿学习考试,6.24开始做传统项目管理,系统学习计划,打包报考,(╥╯^╰╥):ACP+实战+PMP+软考,历时两个月 每天上下班路上3个小时,听录音,(报的远程班,倍速听了 ...
- eclipse 常用配置
一.内置tomcat配置 解决eclipse 内置tomcat 与本地tomcat 端口冲突 传送门:http://www.cnblogs.com/tweet/p/7568979.html 二.字体设 ...
- H5 68-伪元素选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- poj2226 Muddy Fields 填充棒子(二分匹配)
参考博客:https://blog.csdn.net/liujc_/article/details/51287019 参考博客:https://blog.csdn.net/acdreamers/art ...
- Summer sell-off CodeForces - 810B (排序后贪心)
Summer holidays! Someone is going on trips, someone is visiting grandparents, but someone is trying ...
- Java 集合的简单理解
集合(容器) Java的集合类分别是Collection接口和Map接口派生而来. Collection接口 对于实现Collection接口的子类,都会实现Collection接口中抽象方法,所以他 ...
- MongoDB——待整理
MongoDB mongoose——http://mongoosejs.com/ npm i mongoose Mongoose 通过外键与另一张表建立关联:Mongoose Populate 基本使 ...
- 阿里云ECS服务器云监控(cloudmonitor)Go语言版本插件安装卸载与维护
云监控Go语言版本插件安装_主机监控_用户指南_云监控-阿里云https://help.aliyun.com/document_detail/97929.html 云监控cloudmonitor 1. ...