使用js,Jquery 禁用浏览器的back 和 next 按钮:
2016-10-25 16:52
253 查看
<转自:http://www.cnblogs.com/generalLi/p/5887259.html>
本文为转载,并非原创,因为感觉挺不错的,所以分享了~
<侵删>
<原文如下>
使用js,Jquery 禁用浏览器的back 和 next 按钮:
![](http://images2015.cnblogs.com/blog/994143/201609/994143-20160919230225887-1175841740.png)
有时为了防治用户乱了访问顺序,不得不禁掉浏览器的前进后退按钮。
这段代码主要使用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 按钮是否被点击。
本文为转载,并非原创,因为感觉挺不错的,所以分享了~
<侵删>
<原文如下>
使用js,Jquery 禁用浏览器的back 和 next 按钮:
![](http://images2015.cnblogs.com/blog/994143/201609/994143-20160919230225887-1175841740.png)
有时为了防治用户乱了访问顺序,不得不禁掉浏览器的前进后退按钮。
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 按钮是否被点击。
相关文章推荐
- 使用JS禁用浏览器后退按钮
- 使用JS禁用浏览器后退按钮
- 使用JS模拟禁用浏览器后退按钮
- 监听浏览器关闭按钮点击事件 -- 使用JS
- js验证浏览器,禁用按钮,打印,转化字符串等小记
- 使用jquery.qrcode.js在浏览器上生成QRCODE
- JSjQuery parent,next,prev的使用例子
- 监听浏览器关闭按钮点击事件 -- 使用JS
- [JavaScript/JQuery] JS禁用浏览器退格键
- 监听浏览器关闭按钮点击事件 -- 使用JS
- 如何用jQuery禁用浏览器的前进后退按钮?(未测试)
- 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能,以及使用jquery.validate.js表单验证插件的问题处理
- Flask MVVM 开发(vue.js) - ajax如何同步更新地址栏history 以及使用浏览器返回按钮
- js案例:使用js弹出小窗口(没有浏览器窗口地址栏,工具栏,菜单栏,显示栏,只有关闭和最小化按钮)
- jquery中禁止浏览器使用前进后退按钮
- ZeroClipboard / jquery.zclip.min.js跨浏览器复制插件使用中遇到的问题解决
- JS、jqueryie6浏览器下使用js无法提交表单的解决办法
- 监听浏览器关闭按钮点击事件 -- 使用JS
- mac系统下jquery.uploadify.js功能无法使用的原因之一——flash插件被禁用
- JS小技巧:禁用浏览器后退按钮