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

实现原理:

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

全部通过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 直接拷贝到你的页面去,然后你的页面就无法退出了,但是建议大家不要这样做哦,我这里只是为了学习 这个方法怎么用而已,仅此而已~~~~~~~~~

最新文章

  1. webpack入门教程之初识loader(二)
  2. ubuntu常用命令大全
  3. YUM源设置
  4. 用JS修改checkbox的选中状态
  5. 淘宝(阿里百川)手机客户端开发日记第十一篇 JSP+Servlet
  6. Bootstrap系列 -- 14. 表单控件输入框input
  7. 【架构】浅谈web网站架构演变过程
  8. 使用egypt+graphviz生成函数调用关系图示例
  9. HTML+CSS学习笔记 (6) - 开始学习CSS
  10. 安装 Homebrew
  11. 【BZOJ3673】【可持久化并查集】可持久化并查集 by zky
  12. nginx配置方法
  13. 【Android每周专题】触摸屏事件
  14. Java使用URL类下载的图片不完整
  15. paddlepaddle
  16. cgroup.conf系统初始配置
  17. elasticsearch 动态模板设置
  18. UVA 11054 Wine trading in Gergovia(思维)
  19. Domino(群组工作软件)
  20. 17、enum简介

热门文章

  1. phpize是干嘛的
  2. 在Matlab中的plot
  3. 如何用elasticsearch构架亿级数据采集系统(第1集:非生产环境windows安装篇)
  4. CFD计算过程发散诸多原因分析【转载】
  5. curl获得cookie数据&lt;转&gt;
  6. SC3聚类 | 拉普拉斯矩阵 | Laplacian matrix | 图论 | R代码
  7. Nfs固定端口 nfs 端口公网映射
  8. vue-使用keepAlive对上下拉刷新列表数据 和 滚动位置细节进行处理
  9. 007 搜索API
  10. linux下如何制作initramfs镜像?