Jquery 监听浏览器前进后退
jQuery(document).ready(function () {
if (window.history && window.history.pushState) {
$(window).on('popstate', function () {
/// 当点击浏览器的 后退和前进按钮 时才会被触发,
window.history.pushState('forward', null, '');
window.history.forward(1);//当前页 ,
});
}
//在ie中必须有这两行
window.history.pushState('forward', null, '');
window.history.forward(1);
});
这段代码主要使用js的window.history 对象;介绍一下history的几个比较重要的方法:
1、window.history.forward(); //加载下一个页面(浏览过的) ,和浏览器上的 前进按钮 效果相同
2、window.history.back(); //回到上一个页面 , 和浏览器上的 后退按钮效果相同
ps: 如果浏览的网页有缓存, 当点击浏览器上的 前进和后退 按钮时, 是优先加载浏览器的缓存数据,(重要一点是:不走服务器端代码,如果在服务器端代码加断点,是不过断点的, 这也是缓存的一个弊端,有时候容易导致表单中的数据错乱掉,不能及时更新,)
3、history.go(0); //刷新当前页面 和浏览器上的 刷新 按钮效果相同
history.go(-1): 效果和history.back() 效果相同
history.go(1) : 效果和history.forward() 效果相同
PS: js history对象示例代码
4、window.history.pushState(状态码, 标题 , url) /// 添加并激活一个历史记录条目, 向history 添加当前页面的历史记录,并修改当前页面的url。
举个例子:
假如当前页面的url是:http://localhost:28713/SBNext/index.aspx
执行:window.history.pushState('forward', null, 'badu.aspx');
结果: 在浏览器历史记录中添加一条记录http://localhost:28713/SBNext/index.aspx。当前页面的url变成http://localhost:28713/SBNext/badu.aspx ,但是不会刷新页面,也不会检查url是否正确。 这时如果点击 浏览器的back按钮会回退到http://localhost:28713/SBNext/index.aspx页面, 还是当前页面。 所以这就是上面禁用back按钮 的原理。
5、History.replaceStatet(); 参数和pushState()函数一样, 作用替换当前的url。
6、每当激活的历史记录发生变化时,都会触发popstate事件 , 点击浏览器的back 和 next 按钮会触发popstate事件 , 点击刷新按钮不会。
所以可以使用 popstate 事件监听 back 和next 按钮是否被点击。
转自 : https://www.cnblogs.com/generalLi/p/5887259.html
补充:
当点击浏览器后退时 发出警告:
jQuery(document).ready(function ($) {
if (window.history && window.history.pushState) {
$(window).on('popstate', function () {
var hashLocation = location.hash;
var hashSplit = hashLocation.split("#!/");
var hashName = hashSplit[1];
if (hashName !== '') {
var hash = window.location.hash;
if (hash === '') {
alert("Back button isn't supported. You are leaving this application on next clicking the back button");
}
}
});
window.history.pushState('forward', null, './#forward');
}
});
参考:https://stackoverflow.com/questions/6359327/detect-back-button-click-in-browser
Jquery 监听浏览器前进后退的更多相关文章
- 用jQuery监听浏览器窗口的变化
$(window).resize(function () { //当浏览器大小变化时 alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(docume ...
- javascript监听浏览器前进后退
window.addEventListener("popstate", function () { backStatus=true; return; })
- 监听用户的后退键,解决部分浏览器回退的bug
监听用户的后退键,解决部分浏览器回退的bug $(document).keydown(function (event) { // 监听backspace键 if (event.keyCode == 8 ...
- 监听浏览器返回键、后退、上一页事件(popstate)操作返回键
在WebApp或浏览器中,会有点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面.确认离开页面或执行一些其它操作的需求.可以使用 popstate 事件进行监听返回.后退.上一页操作. 一 ...
- jquery 监听所有锚点链接实现平滑移动
jquery 监听所有锚点链接实现平滑移动,地址栏上不会改变链接地址 //监听所有锚点链接实现平滑移动 $('a[href*=#],area[href*=#]').click(function() { ...
- 监听浏览器返回,pushState,popstate 事件,window.history对象
在WebApp或浏览器中,会有点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面.确认离开页面或执行一些其它操作的需求.可以使用 popstate 事件进行监听返回.后退.上一页操作. 一 ...
- JS实时监听浏览器宽度的变化
boot:function(){ //加载页面时执行一次 changeMargin(); //监听浏览器宽度的改变 window.onresize = function(){ changeMargin ...
- jQuery监听事件经典例子
关键字:jQuery监听事件经典例子 js代码: ============================================================ $(function( ...
- js监听浏览器tab窗口切换
js监听浏览器tab窗口切换 ——IT唐伯虎 摘要:js监听浏览器tab窗口切换. if (document.hidden !== undefined) { document.addEventLis ...
随机推荐
- GSpan-频繁子图挖掘算法
GSpan频繁子图挖掘算法,网上有很多相关的介绍,中文的一些资料总是似是而非,讲的不是很清楚(感觉都是互相抄来抄去,,,基本都是一个样,,,),仔细的研读了原论文后,在这里做一个总结. 1. GSpa ...
- LeetCode OJ:Palindrome Partitioning(回文排列)
Given a string s, partition s such that every substring of the partition is a palindrome. Return all ...
- 剑指offer--50.滑动窗口的最大值
时间限制:1秒 空间限制:32768K 热度指数:157641 题目描述 给定一个数组和滑动窗口的大小,找出所有滑动窗口里数值的最大值.例如,如果输入数组{2,3,4,2,6,2,5,1}及滑动窗口的 ...
- Spring报错:java.io.FileNotFoundException: class path resource [applicationContext.xml] cannot be opened because it does not exist
感谢:http://blog.chinaunix.net/uid-20681545-id-184633.html提供的解决方案,非常棒 ! 问题说明: 新建一个Spring项目,新建一个Bean类:H ...
- Hibernate主键生成策略详解
转载自:http://blog.csdn.net/wanghuan203/article/details/7562395 hibernate提供的主键生成策略,使我们可以在实体类的映射xml文件中设定 ...
- Android程序员学WEB前端(1)-HTML(1)-标准结构常用标签-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522043觉得博文有用,请点赞,请评论,请关注,谢谢!~ 8月份了,换工作有2个月了 ...
- 评价指标的计算:accuracy、precision、recall、F1-score等
记正样本为P,负样本为N,下表比较完整地总结了准确率accuracy.精度precision.召回率recall.F1-score等评价指标的计算方式: (右键点击在新页面打开,可查看清晰图像) 简单 ...
- CFE Bootloader详解 — 引导过程
CFE命令 CFE引导过程 系统加电后,CFE从boot.S (src/shared/boot.S)开始执行,完成判断芯片类型.设置时钟.初始化缓存.把自身加载进RAM等任务后,跳转到c_main() ...
- slam学习
学习内容: 数学: 线性代数,概率论, 优化理论,离散数学, 李代数, 凸优化: 算法: 概率机器人, 机器人状态估计, 深度学习,非线性优化: 工程: c/c++ , python, ros, ...
- hihoCoder1599 bfs
特殊的剪枝,整体上和辗转相除法有点像 #1599 : 逃离迷宫4 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi被坏女巫抓进一座由无限多个格子组成的矩阵迷宫. 小 ...