zoukankan      html  css  js  c++  java
  • 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 按钮是否被点击。

     

     

  • 相关阅读:
    Servlet_note
    J2SE学习历程
    ASP.NET Core搭建多层网站架构【0-前言】
    使用oh-my-posh美化powershell
    Linux使用整理
    Ubuntu18.04国内源安装MySQL8.0
    Visual Studio Code 个人配置备份
    ASP.NET Core搭建多层网站架构【15-扩展之使用Obfuscar混淆加密保护代码】
    ASP.NET Core搭建多层网站架构【14-扩展之部署到IIS】
    ASP.NET Core搭建多层网站架构【13-扩展之支持全球化和本地化多语言】
  • 原文地址:https://www.cnblogs.com/generalLi/p/5887259.html
Copyright © 2011-2022 走看看