Jquery 禁用浏览器的 后退和前进按钮

使用js,Jquery 禁用浏览器的back 和 next 按钮:

有时为了防治用户乱了访问顺序,不得不禁掉浏览器的前进后退按钮。

 jQuery(document).ready(function () {
                  if (window.history && window.history.pushState) {
                      $(window).on(‘popstate‘, function () {                /// 当点击浏览器的 后退和前进按钮 时才会被触发,
                          window.history.pushState(‘forward‘, null, ‘‘);
                          window.history.forward(1);
                      });
                  }          //
                  window.history.pushState(‘forward‘, null, ‘‘);  //在IE中必须得有这两行
                  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 按钮是否被点击。

时间: 2024-11-01 19:20:31

Jquery 禁用浏览器的 后退和前进按钮的相关文章

JS禁用浏览器前进后退

<script language="javascript"> //防止页面后退 history.pushState(null, null, document.URL); window.addEventListener('popstate', function () { history.pushState(null, null, document.URL); }); </script> 可以屏蔽鼠标和键盘的回退 原文地址:https://www.cnblogs.c

[转] 利用js实现 禁用浏览器后退

[From] http://blog.csdn.net/zc474235918/article/details/53138553 现在很多的内部系统,一些界面,都是用户手动点击退出按钮的.但是为了避免,用户误操作 点击浏览器后退,或者用鼠标手势后退什么的.容易出现误操作.所以在有些页面上,适当的禁用浏览器的后退,是可以提高很大的用户体验.在网上查,可以查到很多js禁用后退的材料. 用的多的方法如下: 1.回退后,产生一个前进事件. 这种方式,不算是一个满意的解决方式.因为用户能体验到,界面的后退

利用js实现 禁用浏览器后退

现在很多的内部系统,一些界面,都是用户手动点击退出按钮的.但是为了避免,用户误操作 点击浏览器后退,或者用鼠标手势后退什么的.容易出现误操作.        所以在有些页面上,适当的禁用浏览器的后退,是可以提高很大的用户体验.        在网上查,可以查到很多js禁用后退的材料. 1.回退后,产生一个前进事件. 这种方式,不算是一个满意的解决方式.因为用户能体验到,界面的后退,前进.体验不好. <script language="JavaScript"> javascr

多页面网站禁用浏览器后退键

如标题所说,本文提供的方法适用于多页面网站,如SPA单页面应用等不适用. 利用window.onpopstate和window.history.pushState 控制浏览器后退键失效,下面说一下如何实现. 1.在你需要禁止浏览器后退键的页面上加上下面的代码: <script> $(document).ready(function(){ //判断当前浏览器是否支持history和pushState,据我测试当前大部分浏览器都支持 if(window.history && win

禁用浏览器后退按钮

基本上是3个solution: 1).设置网页过期(服务器端) 2).javascript:window.history(客户端) 3).对于键盘的backspace.通过window.event来过滤,当然要考虑的是对于Input控件,要保持删除的功能. <script type="text/javascript"> function backspace() { if (event.keyCode == 8 && event.srcElement.tagN

javascript怎么禁用浏览器后退按钮

1. 复制代码 代码如下: <script language="JavaScript"> javascript:window.history.forward(1); </script> 利用JS产生一个“前进”的动作,以抵消后退功能,这种方法应该是最简洁的,并且不需要考虑用户连点两次或多次“后退”的情况,缺点是当用户端禁用了JavaScript之后即失效. 2. 复制代码 代码如下: <A HREF="logout.do" onclic

禁用浏览器器返回按钮

场景:今天在项目中遇到一种场景,需要禁用浏览器返回按钮,防止用户误操作.考虑试用一下history的新伙伴,history.pushState(),popstate事件 尝试:在各大网友的谋略中,用的最多的版本 history.pushState(null, null, document.URL);$(window).on('popstate', function() { history.pushState(null, null, document.URL);}); 果然不错,chrome和Fi

JQuery Mobile入门——设置后退按钮文字(转)

http://www.tuicool.com/articles/AZnYVz JQuery Mobile入门——设置后退按钮文字 时间 2013-01-09 20:24:28  CSDN博客原文  http://blog.csdn.net/liang408015204/article/details/8487201 1.给page容器头部添加后退按钮,只需在page容器中添加data-add-back-btn属性,并将属性值设置为true.显示默认为back,可修改data-back-btn-t

jquery禁用a标签,jquery禁用按钮click点击

jquery禁用a标签方法1 $(document).ready(function () { $("a").each(function () { var textValue = $(this).html(); if (textValue == "XX概况" || textValue == "服务导航") { $(this).css("cursor", "default"); $(this).attr('hr