javascript - 如何使用 JavaScript 停止浏览器后退按钮？

Question

我正在用 PHP 做一个在线测验应用程序。我想限制用户返回考试。

我尝试了以下脚本，但它停止了我的计时器。

我该怎么办？

计时器存储在文件cdtimer.js中。

<script type="text/javascript">
    window.history.forward();
    function noBack()
    {
        window.history.forward();
    }
</script>

<body onLoad="noBack();" onpageshow="if (event.persisted) noBack();" onUnload="">

我有一个考试计时器，它从 MySQL 值中获取考试持续时间。计时器相应地启动，但是当我输入代码以禁用后退按钮时它会停止。我的问题是什么？

score 183 · Accepted Answer

禁用后退按钮不起作用的原因有很多。最好的办法是警告用户：

window.onbeforeunload = function() { return "Your work will be lost."; };

此页面确实列出了您可以尝试禁用后退按钮的多种方法，但都不能保证：

http://www.irt.org/script/311.htm

score 152 · Accepted Answer

覆盖 Web 浏览器的默认行为通常是一个坏主意。出于安全原因，客户端脚本没有足够的权限来执行此操作。

也有一些类似的问题被问到，

您实际上无法禁用浏览器后退按钮。但是，您可以使用您的逻辑来做魔术，以防止用户向后导航，这会产生一种好像它被禁用的印象。方法如下 - 查看以下代码段。

(function (global) {

    if(typeof (global) === "undefined") {
        throw new Error("window is undefined");
    }

    var _hash = "!";
    var noBackPlease = function () {
        global.location.href += "#";

        // Making sure we have the fruit available for juice (^__^)
        global.setTimeout(function () {
            global.location.href += "!";
        }, 50);
    };

    global.onhashchange = function () {
        if (global.location.hash !== _hash) {
            global.location.hash = _hash;
        }
    };

    global.onload = function () {
        noBackPlease();

        // Disables backspace on page except on input fields and textarea..
        document.body.onkeydown = function (e) {
            var elm = e.target.nodeName.toLowerCase();
            if (e.which === 8 && (elm !== 'input' && elm  !== 'textarea')) {
                e.preventDefault();
            }
            // Stopping the event bubbling up the DOM tree...
            e.stopPropagation();
        };
    }
})(window);

这是在纯 JavaScript 中，所以它可以在大多数浏览器中工作。它还会禁用退格键，但该键将在input字段和textarea.

反应

对于 React 项目中的 modal 组件，modal 的打开或关闭，控制浏览器返回是必要的动作。

:stopBrowserBack停止浏览器后退按钮功能，也得到一个回调函数。这个回调函数就是你想要做的：

const stopBrowserBack = callback => {
  window.history.pushState(null, "", window.location.href);
  window.onpopstate = () => {
    window.history.pushState(null, "", window.location.href);
    callback();
  };
};

:startBrowserBack浏览器后退按钮功能的复兴：

const startBrowserBack = () => {
  window.onpopstate = undefined;
  window.history.back();
};

在您的项目中的用法：

handleOpenModal = () =>
  this.setState(
    { modalOpen: true },
    () => stopBrowserBack(this.handleCloseModal)
  );

handleCloseModal = () =>
  this.setState(
    { modalOpen: false },
    startBrowserBack
  );

score 11 · Accepted Answer

history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.URL);
});

此 JavaScript 代码不允许任何用户返回（适用于 Chrome、Firefox、Internet Explorer 和 Edge）。

score 10 · Accepted Answer

jordanhollinger.com上的这篇文章是我认为的最佳选择。类似于 Razor 的答案，但更清晰一些。代码如下；乔丹霍林格的完整学分：

前一页：

<a href="/page-of-no-return.htm#no-back>You can't go back from the next page</a>

不归路的 JavaScript 页面：

// It works without the History API, but will clutter up the history
var history_api = typeof history.pushState !== 'undefined'

// The previous page asks that it not be returned to
if ( location.hash == '#no-back' ) {
  // Push "#no-back" onto the history, making it the most recent "page"
  if ( history_api ) history.pushState(null, '', '#stay')
  else location.hash = '#stay'

  // When the back button is pressed, it will harmlessly change the url
  // hash from "#stay" to "#no-back", which triggers this function
  window.onhashchange = function() {
    // User tried to go back; warn user, rinse and repeat
    if ( location.hash == '#no-back' ) {
      alert("You shall not pass!")
      if ( history_api ) history.pushState(null, '', '#stay')
      else location.hash = '#stay'
    }
  }
}

score 10 · Accepted Answer

<html>
<head>
    <title>Disable Back Button in Browser - Online Demo</title>
    <style type="text/css">
        body, input {
            font-family: Calibri, Arial;
        }
    </style>
    <script type="text/javascript">
        window.history.forward();
        function noBack() {
            window.history.forward();
        }
    </script>
</head>
<body onload="noBack();" onpageshow="if (event.persisted) noBack();" onunload="">
    <H2>Demo</H2>
    <p>This page contains the code to avoid Back button.</p>
    <p>Click here to Goto <a href="noback.html">NoBack Page</a></p>
</body>
</html>

score 9 · Accepted Answer

此代码已使用最新的 Chrome 和 Firefox 浏览器进行了测试。

<script type="text/javascript">
    history.pushState(null, null, location.href);
    history.back();
    history.forward();
    window.onpopstate = function () { history.go(1); };
</script>

score 5 · Accepted Answer

轻松尝试：

history.pushState(null, null, document.title);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.title);
});

score 3 · Accepted Answer

非常简单和干净的功能，可以在不干扰页面的情况下打破后退箭头。

好处：

即时加载并恢复原始哈希，因此用户不会因 URL 明显变化而分心。
用户仍然可以通过按回 10 次退出（这是一件好事），但不会意外
没有像其他解决方案那样使用的用户干扰onbeforeunload
它只运行一次并且不会干扰进一步的哈希操作，以防您使用它来跟踪状态
恢复原始哈希，几乎不可见。
使用setInterval，因此它不会破坏慢速浏览器并且始终有效。
纯 JavaScript，不需要 HTML5 历史，适用于任何地方。
不显眼，简单，并且与其他代码配合得很好。
不使用unbeforeunload模式对话框中断用户。
它只是工作而没有大惊小怪。

注意：其他一些解决方案使用onbeforeunload. 请不要用于onbeforeunload此目的，当用户尝试关闭窗口、点击后退箭头等时，它会弹出一个对话框。像这样的模态onbeforeunload通常只适用于极少数情况下，例如当他们实际在屏幕上进行了更改并且没有t救了他们，不是为了这个目的。

这个怎么运作

在页面加载时执行
保存您的原始哈希（如果在 URL 中）。
按顺序将 #/noop/{1..10} 附加到哈希
恢复原始哈希

就是这样。没有进一步的混乱，没有后台事件监控，没有别的。

一秒使用

要部署，只需在页面或 JavaScript 代码中的任意位置添加：

<script>
    /* Break back button */
    window.onload = function(){
      var i = 0;
      var previous_hash = window.location.hash;
      var x = setInterval(function(){
        i++;
        window.location.hash = "/noop/" + i;
        if (i==10){
          clearInterval(x);
          window.location.hash = previous_hash;
        }
      }, 10);
    }
</script>

score 2 · Accepted Answer

这似乎对我们禁用浏览器上的后退按钮以及退格按钮使您返回有效。

history.pushState(null, null, $(location).attr('href'));
window.addEventListener('popstate', function () {
    history.pushState(null, null, $(location).attr('href'));
});

score 2 · Accepted Answer

在现代浏览器中，这似乎可行：

// https://developer.mozilla.org/en-US/docs/Web/API/History_API
let popHandler = () => {
  if (confirm('Go back?')) {
    window.history.back() 
  } else {
    window.history.forward()
    setTimeout(() => {
      window.addEventListener('popstate', popHandler, {once: true})
    }, 50) // delay needed since the above is an async operation for some reason
  }
}
window.addEventListener('popstate', popHandler, {once: true})
window.history.pushState(null,null,null)

score 2 · Accepted Answer

你可以放一个小脚本然后检查。它不允许您访问上一页。

这是在 JavaScript 中完成的。

<script type="text/javascript">
    function preventbackbutton() { window.history.forward(); }
    setTimeout("preventbackbutton()", 0);
    window.onunload = function () { null };
</script>

当您尝试通过浏览器访问后一页或上一页时，window.onunload 函数会触发。

score 2 · Accepted Answer

我对React（类组件）有这个问题。

我很容易解决了它：

componentDidMount() {
    window.addEventListener("popstate", e => {
        this.props.history.goForward();
    }
}

我用过HashRouter从react-router-dom.

score 2 · Accepted Answer

只需立即运行代码片段并尝试返回

history.pushState(null, null, window.location.href);
history.back();
window.onpopstate = () => history.forward();

score 1 · Accepted Answer

<script src="~/main.js" type="text/javascript"></script>

<script type="text/javascript">
    window.history.forward();

    function noBack() {
        window.history.forward();
    }
</script>

score 1 · Accepted Answer

你根本不能也不应该这样做。但是，这可能会有所帮助：

<script type = "text/javascript" >
    history.pushState(null, null, 'pagename');
    window.addEventListener('popstate', function(event) {
        history.pushState(null, null, 'pagename');
    });
</script>

这适用于我的 Google Chrome 和 Firefox。

score 1 · Accepted Answer

尝试这样做以防止 Internet Explorer 中的退格按钮默认充当“后退”：

<script language="JavaScript">
    $(document).ready(function() {
    $(document).unbind('keydown').bind('keydown', function (event) {
        var doPrevent = false;

        if (event.keyCode === 8 ) {
            var d = event.srcElement || event.target;
            if ((d.tagName.toUpperCase() === 'INPUT' &&
                 (
                     d.type.toUpperCase() === 'TEXT'     ||
                     d.type.toUpperCase() === 'PASSWORD' ||
                     d.type.toUpperCase() === 'FILE'     ||
                     d.type.toUpperCase() === 'EMAIL'    ||
                     d.type.toUpperCase() === 'SEARCH'   ||
                     d.type.toUpperCase() === 'DATE' )
                ) ||
                d.tagName.toUpperCase() === 'TEXTAREA') {

                     doPrevent = d.readOnly || d.disabled;
                }
                else {
                    doPrevent = true;
                }
            }

            if (doPrevent) {
                event.preventDefault();
            }

            try {
                document.addEventListener('keydown', function (e) {
                    if ((e.keyCode === 13)) {
                        //alert('Enter keydown');
                        e.stopPropagation();
                        e.preventDefault();
                    }
                }, true);
            }
            catch (err) {
            }
        });
    });
</script>

score 1 · Accepted Answer

它基本上将窗口的“onbeforeunload”事件与正在进行的文档“mouseenter”/“mouseleave”事件一起分配，因此警报仅在单击超出文档范围时触发（然后可能是浏览器的后退或前进按钮）

    $(document).on('mouseenter', function(e) { 
            window.onbeforeunload = null; 
        }
    );
    
    $(document).on('mouseleave', function(e) { 
            window.onbeforeunload = function() { return "You work will be lost."; };
        }
    );

score 0 · Accepted Answer

我创建了一个 HTML 页面 ( index.html )。我还在脚本文件夹/目录中创建了一个（mechanism.js）。然后，我根据需要使用 form、table、span 和 div 标签将所有内容放在 ( index.html ) 中。现在，这是让后退/前进什么都不做的技巧！

首先，您只有一页的事实！其次，使用带有 span / div 标签的 JavaScript 在需要时通过常规链接在同一页面上隐藏和显示内容！

在'index.html'里面：

<td width="89px" align="right" valign="top" style="letter-spacing:1px;">
    <small>
        <b>
            <a href="#" class="traff" onClick="DisplayInTrafficTable();">IN</a>&nbsp;
        </b>
    </small>
    [&nbsp;<span id="inCountSPN">0</span>&nbsp;]
</td>

在“mechanism.js”内部：

function DisplayInTrafficTable()
{
    var itmsCNT = 0;
    var dsplyIn = "";
    for (i=0; i<inTraffic.length; i++)
    {
        dsplyIn += "<tr><td width='11'></td><td align='right'>" + (++itmsCNT) + "</td><td width='11'></td><td><b>" + inTraffic[i] + "</b></td><td width='11'></td><td>" + entryTimeArray[i] + "</td><td width='11'></td><td>" + entryDateArray[i] + "</td><td width='11'></td></tr>";
    }
    document.getElementById('inOutSPN').innerHTML =
        "" +
        "<table border='0' style='background:#fff;'><tr><th colspan='21' style='background:#feb;padding:11px;'><h3 style='margin-bottom:-1px;'>INCOMING TRAFFIC REPORT</h3>" +
        DateStamp() +
        "&nbsp;&nbsp;-&nbsp;&nbsp;<small><a href='#' style='letter-spacing:1px;' onclick='OpenPrintableIn();'>PRINT</a></small></th></tr><tr style='background:#eee;'><td></td><td><b>###</b></td><td></td><td><b>ID #</b></td><td></td><td width='79'><b>TYPE</b></td><td></td><td><b>FIRST</b></td><td></td><td><b>LAST</b></td><td></td><td><b>PLATE #</b></td><td></td><td><b>COMPANY</b></td><td></td><td><b>TIME</b></td><td></td><td><b>DATE</b></td><td></td><td><b>IN / OUT</b></td><td></td></tr>" +
        dsplyIn.toUpperCase() +
        "</table>" +
        "";
    return document.getElementById('inOutSPN').innerHTML;
}

它看起来很麻烦，但请注意函数名称和调用、嵌入的 HTML 和 span 标记 id 调用。这是为了展示如何将不同的 HTML 注入同一页面上的同一 span 标签中！后退/前进如何影响此设计？它不能，因为您在同一页面上隐藏对象并替换其他对象！

我们如何隐藏和显示？开始：

根据需要在“mechanism.js”中的内部函数，使用：

document.getElementById('textOverPic').style.display = "none"; //hide
document.getElementById('textOverPic').style.display = "";     //display

在'index.html'内部通过链接调用函数：

<img src="images/someimage.jpg" alt="" />
<span class="textOverPic" id="textOverPic"></span>

和

<a href="#" style="color:#119;font-size:11px;text-decoration:none;letter-spacing:1px;" onclick="HiddenTextsManager(1);">Introduction</a>

score 0 · Accepted Answer

就我而言，这是一个购物订单。所以我禁用了按钮。当用户单击返回时，该按钮仍然被禁用。当他们再次单击返回时，然后单击页面按钮前进。我知道他们的订单已提交并跳到另一页。

在页面实际刷新的情况下，这将使按钮（理论上）可用；然后，我能够在页面加载中做出反应，订单已经提交并被重定向。

score 0 · Accepted Answer

刚设置location.hash="Something"。按下后退按钮时，哈希将从 URL 中删除，但页面不会返回。

这种方法可以很好地防止意外返回，但出于安全目的，您应该设计后端以防止重新应答。

score 0 · Accepted Answer

这里的一些解决方案不会阻止后退事件的发生 - 他们让后退事件发生（并且浏览器内存中保存的有关页面的数据丢失）然后他们播放前进事件以尝试隐藏后退事件的事实事件刚刚发生。如果页面保持瞬态，则不成功。

我为 React 编写了这个解决方案（当没有使用反应路由器时），它基于 vrfvr 的回答。

除非用户确认弹出窗口，否则它将真正阻止后退按钮执行任何操作：

  const onHashChange = useCallback(() => {
    const confirm = window.confirm(
      'Warning - going back will cause you to loose unsaved data. Really go back?',
    );
    window.removeEventListener('hashchange', onHashChange);
    if (confirm) {
      setTimeout(() => {
        window.history.go(-1);
      }, 1);
    } else {
      window.location.hash = 'no-back';
      setTimeout(() => {
        window.addEventListener('hashchange', onHashChange);
      }, 1);
    }
  }, []);

  useEffect(() => {
    window.location.hash = 'no-back';
    setTimeout(() => {
      window.addEventListener('hashchange', onHashChange);
    }, 1);
    return () => {
      window.removeEventListener('hashchange', onHashChange);
    };
  }, []);

score 0 · Accepted Answer

此代码是完整的 javascript。把它放在你的主页上或任何你需要的东西上，当有人回去时，它会把他们带到他们以前所在的页面上。

<script type="text/javascript"> 
        function preventBack() { 
            window.history.forward();  
        } 
          
        setTimeout("preventBack()", 0); 
          
        window.onunload = function () { null }; 
    </script>

score 0 · Accepted Answer

这是我对 Google 查询“禁用后退按钮”的第一次点击。我的用例与最初发布的问题略有不同。我需要为已登录安全网站的用户“禁用后退按钮”（即防止用户注销，然后另一个用户可以通过点击后退按钮查看前一个用户的信息）。

简而言之，这里的目标是防止用户在登录用户注销后看到应用程序页面。

这可以通过将下面显示的代码添加到经过身份验证的应用程序的页面来实现。

此处提供了使用 Apache Shiro 的完整示例：

https://github.com/NACHC-CAD/web-security-example/releases/tag/v2.0.0

<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />

<script>
    if(performance.navigation.type == 2){
        console.log("Doing reload");   
        location.reload(true);
        console.log("Done with reload");
    }
    console.log("Script loaded.")
</script>

score 0 · Accepted Answer

这有效：

$(document).ready(async function ()
{
    history.pushState(null, null, location.href);
    window.onpopstate = function () {
        history.go(1);
    };
}

score 0 · Accepted Answer

基于答案@Franklin Innocent F

Kotlin/JS (React) 的解决方案：

import org.w3c.dom.events.Event
import kotlin.browser.document
import kotlin.browser.window

...
override fun componentDidMount() {
    window.history.pushState(null, "", window.location.href)
    window.history.back()
    window.history.forward()
    window.addEventListener("popstate", browserBackButtonHandler)
}

...
private val browserBackButtonHandler: (Event?) -> Unit = {
    window.history.go(1)
}

score -1 · Accepted Answer

这是另一种方法。我们可以添加简短的 SessionStorage 条件，而不是仅仅试图避免返回按钮功能（不能可靠地工作）。

假设我们有三个不同的页面（page1、page2 和 page3）。在每一页上，我们都有一个链接可以点击进入下一个页面，我们不希望用户能够返回到上一页。

在第一页 (page1.html) 上，我们创建一个带有虚拟“prev”代码的 SI（sessionStorage Item）和另一个带有“page1”代码（SI “now”）的 SI：

  PAGE 1  <button onclick="goto()">PAGE 2</button>

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

  let thispage = '1' // Or 123456 if preferred or make sense

  // You can replace this fixed 'thispage' value on each page with a script counting the clicks
  // or any other way to increase its value, i.e., thispage++
  // or what you want, even counting the url.length (lol)

  sessionStorage.setItem('prev', '0') // Dummy code
  sessionStorage.setItem('now', thispage)

  // You can here make this page unreachable with page2/page3 SI same conditions

  function goto(){
      window.location = "page2.html"
  }

在 page2.html 上，我们使用通常的 NoBack 脚本（如果它有效），并且仅当我们来自 page1 时才更新 SI：

  PAGE 2  <button onclick="goto()">PAGE 3</button>

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

  // If it works, let it work :-)

  history.pushState(null, null, location.href);
  history.back();
  history.forward();
  window.onpopstate = function () {
      history.go(1);
  };

  // else

  let thispage = '2' // 456789
  let thisprev = sessionStorage.getItem('now')
  if(sessionStorage.getItem('prev')==thispage) {
      console.log('USER is back on PAGE 2')
      setTimeout(function() { goto() }, 1000); // Remove log + setTimeout
  }
  if(thisprev !== thispage) {
      if(thisprev < thispage) {
          console.log('USER is coming from PAGE 1')
          sessionStorage.setItem('prev', thisprev)
          sessionStorage.setItem('now', thispage)
      }
      else {
          console.log('USER try to reload this page')
          setTimeout(function() { goto() }, 1000);
      }
  }

  function goto(){
      window.location = "page3.html"
  }

在 page3.html 上：

  PAGE 3  <button onclick="goto()">BACK TO PAGE 1</button>

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

  history.pushState(null, null, location.href);
  history.back();
  history.forward();
  window.onpopstate = function () {
      history.go(1);
  };

  let thispage = '3' // 999999
  let thisprev = sessionStorage.getItem('now')
  if(sessionStorage.getItem('prev') == thispage) {
      goto()
  }
  if(thisprev !== thispage) {
      if(thisprev < thispage) {
          sessionStorage.setItem('prev', thisprev)
          sessionStorage.setItem('now', thispage)
      }
      else {
          goto()
      }
  }
  function goto(){
      window.location = "page1.html" // Reinit test
  }

优点是即使用户手动重新加载前一页（如果他有时间查看并记住 URL）它仍然有效。它并未在所有设备上进行测试，但似乎在 Firefox + Chrome + Edge Windows 10 和 Firefox + Chrome 在 OS X 上运行良好。

score -2 · Accepted Answer

//"use strict";
function stopBackSpace(e) {
    var ev = e || window.event;
    var obj = ev.target || ev.srcElement;
    var t = obj.type || obj.getAttribute('type');

    var vReadOnly = obj.getAttribute('readonly');
    var vEnabled = obj.getAttribute('enabled');
    // null
    vReadOnly = (vReadOnly == null) ? false : vReadOnly;
    vEnabled = (vEnabled == null) ? true : vEnabled;
    // when click Backspace,judge the type of obj.

    var flag1 = ((t == 'password' || t == 'text' || t == 'textarea') && ((vReadOnly == true || vReadOnly == 'readonly') || vEnabled != true)) ? true : false;

    var flag2 = (t != 'password' && t != 'text' && t != 'textarea') ? true : false;

    if (flag2) {
        e.keyCode = 0;
        e.cancelBubble = true;
        return false;
    }
    if (flag1) {
        e.keyCode = 0;
        e.cancelBubble = true;
        return false;
    }
}
if (typeof($) == 'function') {
    $(function() {
        $(document).keydown(function(e) {
            if (e.keyCode == 8) {
                return stopBackSpace(e);
            }
        });
    });
} else {
    document.onkeydown = stopBackSpace;
}

javascript - 如何使用 JavaScript 停止浏览器后退按钮？

35 回答 35

推荐设置：

反应

javascript - 如何使用 JavaScript 停止浏览器后退按钮？

35 回答 35

推荐设置：

反应

Related

Reference