浏览器限制页面后退

最新推荐文章于 2024-03-01 10:47:52 发布

super_.

最新推荐文章于 2024-03-01 10:47:52 发布

阅读量323

点赞数 1

分类专栏： nodejs JavaScript 文章标签：浏览器限制页面后退禁止页面浏览器后退禁止浏览器后退页面浏览器页面禁止后退不让页面通过浏览器后退

本文链接：https://blog.csdn.net/super_DuoLa/article/details/113185254

版权

JavaScript 同时被 2 个专栏收录

57 篇文章 4 订阅

订阅专栏

nodejs

4 篇文章 0 订阅

订阅专栏

一、应用场景：项目开发过程中，可能会因为群众没有通过系统的返回按钮触发，而是直接通过浏览器后退导致系统异常。所以必要时可禁止页面通过浏览器后退

二、实现

1、js文件： jquery的js文件，无版本限制

<script type="text/javascript" src="js/jquery-2.1.1.js"></script>

2、功能实现

<script type="text/javascript">
    window.history.pushState('forward', null, '#');
    window.history.forward(1);
    $(document).ready(function() {
        if (window.history && window.history.pushState) {
            $(window).on('popstate', function () {
                window.history.forward(1);
            });
        }
    });
</script>

3、完整代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>浏览器禁止后退</title>
     <script type="text/javascript" src="js/jquery-2.1.1.js"></script>
     <script type="text/javascript">
        window.history.pushState('forward', null, '#');
        window.history.forward(1);
        $(document).ready(function() {
            if (window.history && window.history.pushState) {
                $(window).on('popstate', function () {
                    window.history.forward(1);
                });
            }
        });
    </script>
  </head>
  <body>
  	<h1 style="margin: 300px;">当前页面禁止通过浏览器后退</h1>
  </body>
</html>

三、效果

super_.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器限制页面后退

一、应用场景：项目开发过程中，可能会因为群众没有通过系统的返回按钮触发，而是直接通过浏览器后退导致系统异常。所以必要时可禁止页面通过浏览器后退二、实现1、js文件： jquery的js文件，无版本限制<script type="text/javascript" src="js/jquery-2.1.1.js"></script>2、功能实现<script type="text/javascript"> window.history.push
复制链接

扫一扫