我正在使用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的值中获取考试持续时间。计时器按预期开始，但在我添加禁用后退按钮的代码后，它停止了。我的问题是什么？
禁用浏览器的返回按钮可能会导致各种问题，因此最好的方法是向用户发出警告：
window.onbeforeunload = function() { return "Your work will be lost."; };
这个页面确实列出了一些方法，你可以尝试禁用后退按钮，但是没有一个是保证可行的:
通常覆盖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中正常使用。
将此代码片段放置在单独的脚本中，并将其包含在您需要此行为的页面中。在当前设置中，它将执行DOM的onload事件，这是此代码的理想入口点。
已在以下浏览器中进行测试和验证：
我遇到了这个问题，需要一个在各种浏览器上都能正确且“好用”的解决方案，其中包括移动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()（我的旧解决方案）在Mobile Safari上不起作用---似乎什么都没做（即，用户仍然可以返回）。history.pushState() 在它们所有的平台上都有效。history.pushState() 的第三个参数是一个url。那些传递像'no-back-button'或'pagename'这样的字符串的解决方案似乎工作正常，直到您尝试刷新/重新加载页面为止，在这种情况下，当浏览器尝试定位一个带有该URL的页面时，将生成“找不到页面”错误。（当在页面上时，浏览器也可能将该字符串包含在地址栏中，这很丑陋。）应使用location.href来获取URL。history.pushState() 的第二个参数是一个title。在网络上搜索大多数地方都说它被“不使用”，而这里的所有解决方案都使用null。但是，在至少Mobile Safari中，这会将页面的URL放入用户可以访问的历史记录下拉菜单中。但是，当它正常添加一个页面访问条目时，它会输入它的标题，这是更可取的。因此，将document.title传递给它会产生相同的行为。<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>
为限制浏览器后退事件：
window.history.pushState(null, "", window.location.href);
window.onpopstate = function () {
window.history.pushState(null, "", window.location.href);
};
如何阻止返回功能：
history.pushState(null, null, location.href);
window.onpopstate = function () {
history.go(1);
};这段代码将禁用支持HTML5 History 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');
});
history.pushState（）的第三个参数是一个url，并且必须是当前页面的url：请改用location.href。 - JonBrave在Chrome 79中，所有被点赞的答案都对我没用。看起来自Chrome 75版本之后，Chrome改变了关于“返回”按钮的行为。请看此处：
https://support.google.com/chrome/thread/8721521?hl=en
然而，在那个Google帖子中，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事件。这就是为什么我已经将它们添加到脚本中。
我不完全理解他写的是什么，但显然在Chrome 75+中，阻止后退现在需要额外的history.back() / history.forward()。
在 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
);
这是我完成它的方式。
奇怪的是，在Google Chrome和Safari中更改window.location并不好用。
发现在Chrome和Safari中，location.hash不会创建历史记录条目。所以你需要使用pushstate。
这对我来说可以在所有浏览器中工作。
history.pushState({ page: 1 }, "title 1", "#nbb");
window.onhashchange = function (event) {
window.location.hash = "nbb";
};
$(document).ready(function () {
....
}); - Oppa Gingham Style