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? 现在 ...
随机推荐
- Ionic1 环境破坏后程序重新恢复过程
ionic platform remove android ionic platform add android cordova plugin add cordova-plugin-network-i ...
- SpringBoot整合Mybatis使用注解或XML的方式开发
2018-6-4 补充mybatis-spring-boot注解的使用 1.导包 只需要再导入mysql+mybatis两个包 <dependency> <groupId>or ...
- 为什么大公司一定要使用DevOps?
0 DevOps的意图 究竟什么是DevOps? 要想回答这个问题,首先要明确DevOps这个过程参与的人员是谁?即开发团队和IT运维团队!那么,DevOps的意图是什么呢?即在两个团队之间,建立良好 ...
- c++_work
while((ch=getopt(argc, argv, "X:Y:C:")) != EOF) { switch((char)ch) { case 'X': strcpy(strS ...
- Python-模块导入-63
模块导入: # 内置模块 # 扩展的 django # 自定义的 # 文件 # import demo # def read(): # print('my read func') # demo.rea ...
- UVA 10820 欧拉函数模板题
这道题就是一道简单的欧拉函数模板题,需要注意的是,当(1,1)时只有一个,其他的都有一对.应该对欧拉函数做预处理,显然不会超时. #include<iostream> #include&l ...
- Podfile文件用法详解
https://www.jianshu.com/p/b8b889610b7e 2018.01.09 15:51* 字数 2343 阅读 6263评论 3喜欢 34 前言 iOS开发会经常用到cocoa ...
- 开发神器之phpstorm破解与日常使用
PhpStorm 是 JetBrains 公司开发的一款商业的 PHP 集成开发工具,旨在提高用户效率,可深刻理解用户的编码,提供智能代码补全,快速导航以及即时错误检查. PhpStorm可随时帮助用 ...
- React Native之通知栏消息提示(android)
React Native之通知栏消息提示(android) 一,需求分析与概述 1.1,推送作为手机应用的基本功能,是手机应用的重要部分,如果自己实现一套推送系统费时费力,所以大部分的应用都会选择使用 ...
- js实现input的赋值
input框赋值如下所示,是一个文本框的html代码,实际开发中,要涉及到将数据库中的数据取出然后放入input框中. <input id="name1" name=&quo ...