如何使用javascript停止浏览器后退按钮?

gmol1639  于 2021-09-13  发布在  Java
关注(0)|答案(27)|浏览(632)

我正在用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值中获取考试的持续时间。计时器会相应地启动,但当我输入禁用后退按钮的代码时,它就会停止。我有什么问题?

a7qyws3x

a7qyws3x1#

禁用“后退”按钮不会真正起作用的原因有很多。您最好警告用户:

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

此页面确实列出了许多您可以尝试禁用“后退”按钮的方法,但没有一种方法是可以保证的:
http://www.irt.org/script/311.htm

oalqel3c

oalqel3c2#

覆盖web浏览器的默认行为通常是个坏主意。出于安全原因,客户端脚本没有足够的权限执行此操作。
也有一些类似的问题被问到,
如何防止backspace键向后导航?
如何使用javascript防止浏览器对backspace按钮执行默认的历史后退操作?
实际上,您不能禁用“浏览器后退”按钮。但是,您可以使用您的逻辑来执行魔术,以防止用户向后导航,这将产生一种被禁用的印象。下面是操作方法-查看以下代码段。

(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 .

建议的设置:

将此代码段放在单独的脚本中,并将其包含在需要此行为的页面上。在当前设置中,它将执行 onload 事件,它是此代码的理想入口点。
工作演示!
在以下浏览器中进行了测试和验证,
铬。
火狐。
internet explorer(8-11)和edge。
游猎。

p3rjfoxz

p3rjfoxz3#

我遇到了这个问题,需要一个在各种浏览器上都能正常“很好”工作的解决方案,包括mobile safari(发布时的ios 9)。没有一个解决方案是完全正确的。我提供以下内容(在internet explorer 11、firefox、chrome和safari上测试):

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

注意以下几点: history.forward() (我以前的解决方案)在移动safari上不起作用——它似乎什么都不起作用(即,用户仍然可以返回)。 history.pushState() 对所有这些都有效。
第三个论点是 history.pushState() 是一个url。传递类似字符串的解 'no-back-button''pagename' 似乎可以正常工作,直到您尝试刷新/重新加载页面,此时当浏览器尝试定位以该页面为url的页面时,会生成“未找到页面”错误(浏览器在页面上时也可能在地址栏中包含该字符串,这很难看。) location.href 应该用于url。
第二个论点是 history.pushState() 这是一个标题。环顾网络,大多数地方都说它“未被使用”,这里所有的解决方案都通过了 null 为此。然而,至少在mobile safari中,这会将页面的url放入用户可以访问的历史记录下拉列表中。但是,当它为页面访问添加条目时,通常会添加标题,这是更好的选择。如此短暂 document.title 因为这会导致同样的行为。

vsdwdz23

vsdwdz234#

<script>
    window.location.hash = "no-back-button";

    // Again because Google Chrome doesn't insert
    // the first hash into the history
    window.location.hash = "Again-No-back-button"; 

    window.onhashchange = function(){
        window.location.hash = "no-back-button";
    }
</script>
wnvonmuf

wnvonmuf5#

要限制浏览器返回事件,请执行以下操作:

window.history.pushState(null, "", window.location.href);
window.onpopstate = function () {
    window.history.pushState(null, "", window.location.href);
};
ngynwnxp

ngynwnxp6#

此代码将禁用支持html5历史api的现代浏览器的“后退”按钮。在正常情况下,按下后退按钮返回一步,返回上一页。如果使用history.pushstate(),则开始向当前页面添加额外的子步骤。它的工作方式是,如果要使用history.pushstate()三次,然后开始按后退按钮,前三次它将在这些子步骤中返回,然后第四次它将返回上一页。
如果将此行为与 popstate 事件时,您基本上可以设置子状态的无限循环。因此,您加载页面,按下一个子状态,然后点击后退按钮,弹出一个子状态并按下另一个子状态,因此,如果您再次按下后退按钮,它将永远不会用完要按下的子状态。如果您觉得有必要禁用“后退”按钮,这将使您达到目的。

history.pushState(null, null, 'no-back-button');
window.addEventListener('popstate', function(event) {
  history.pushState(null, null, 'no-back-button');
});
6ju8rftf

6ju8rftf7#

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

3xiyfsfu8#

在chrome 79中,没有一个最受欢迎的答案对我有效。看起来chrome在版本75之后改变了后退按钮的行为。请参见此处:
https://support.google.com/chrome/thread/8721521?hl=en
然而,在谷歌的帖子中,azrulmukmin azmi在最后给出的答案确实有效。这就是他的解决方案。

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

chrome的问题在于,除非您执行浏览器操作(即调用history.back),否则它不会触发onpopstate事件。这就是为什么我将这些添加到脚本中。
我不完全明白他写了什么,但显然是另一个原因 history.back() / history.forward() 现在需要在chrome 75+中重新阻塞。

xe55xuns

xe55xuns9#

这是我完成它的方法。
奇怪的是,在谷歌chrome和safari中,改变window.location的效果并不好。
碰巧location.hash没有在chrome和safari的历史记录中创建条目。因此,您必须使用pushstate。
这在所有浏览器中都适用。

history.pushState({ page: 1 }, "title 1", "#nbb");
window.onhashchange = function (event) {
    window.location.hash = "nbb";
};
eoigrqb6

eoigrqb610#

<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>
tktrz96b

tktrz96b11#

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

此javascript代码不允许任何用户返回(适用于chrome、firefox、internet explorer和edge)。

mccptt67

mccptt6712#

我觉得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'
    }
  }
}
iaqfqrcu

iaqfqrcu13#

这段代码是用最新的chrome和firefox浏览器测试的。

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

scyqe7ek14#

React

对于react项目中的模态组件,打开或关闭模态,控制浏览器后退是必要的操作。
这个 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
  );
af7jpaap

af7jpaap15#

轻松尝试:

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

相关问题