zoukankan      html  css  js  c++  java
  • js禁止退出当前页面

    禁止用户退出网页,就一个添加窗体历史状态方法,代码很简单,但是建议大家不要去使用,会给用户带来不友好的体验,我这里只是学习这种方法,看到自己代码上有也知道在哪里改变这些代码,所以分享一下:

    实现原理:

    当我们打开一个网页时,没有退回,是因为地址栏里还没有上一页的历史记录;如果你继续浏览下一页了,有了一条历史记录,你又可以退回之前浏览的网页; 哪么在这里怎么网页无法退回去上一页呢?

    全部通过js代码实现:

    window.history.pushState()        //意思是 给窗体添加一条历史记录 //history历史的意思,pushState() 推动状态 ,方法意思是在历史记录中增加一条新的记录;

    window.history.replaceState()     //replaceState() 替换状态,方法意思是将当前的历史记录给替换掉,传说中的夺舍重生!

    * 这两方法分别有3个参数:
    * state:一个与指定网址相关的状态对象,popstate事件触发时,该对象会传入回调函数。如果不需要这个对象,此处可以填null。
    * title:新页面的标题,但是所有浏览器目前都忽略这个值,就像你保存页面要你输入标题,因此这里可以填null。
    * url:新的网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。一般使用#,来存放当前地址
    *
    * popstate 事件 :每当活动历史记录条目在同一文档的两个历史记录条目之间发生变化时,就会将事件分派到窗口。
    * 也就是说窗体加载时不会触发popstate事件,只有当地址栏发生改变时才会触发popstate事件

    解释完了 

    来看看实列:

    <script>
      function pushHistory() {
        var state = {
          title: "title",
          url: "#"
        };
      window.history.pushState(state, "title", "#"); //大家都应该知道#就代表当前连接,这里是 给地址栏添加一条当前地址的历史记录
      }
      pushHistory(); //页面第一次加载,先给地址栏赋个历史记录
      //由于上面只能赋值一次,所以需要通过popstate事件触发时,来进行回调这个方法
      window.addEventListener("popstate", function(e) { //给窗体添加一个popstate事件触发时 来回调历史记录方法
        pushHistory();
      })
    </script>

    --------------------------------------------------------------------------------------------------------------------

    到这里就结束咯  ,把上面这段js 直接拷贝到你的页面去,然后你的页面就无法退出了,但是建议大家不要这样做哦,我这里只是为了学习 这个方法怎么用而已,仅此而已~~~~~~~~~

  • 相关阅读:
    信息技术手册查重错误比对分析程序开发记录04
    信息技术手册查重错误比对分析程序开发记录03
    信息技术手册查重错误比对分析程序开发记录02
    第一周博客01——设计模式原则总结
    react 性能优化
    h5 rem js自动适配
    JavaScript深拷贝实现原理简析
    word,excel,ppt在线预览功能
    react-route4 学习记录
    README 语法记录
  • 原文地址:https://www.cnblogs.com/longxinyv/p/11310398.html
Copyright © 2011-2022 走看看