我正在用 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 值中获取考试持续时间。计时器相应地启动，但是当我输入代码以禁用后退按钮时它会停止。我的问题是什么？
【问题讨论】：
标签： javascript browser
禁用后退按钮不起作用的原因有很多。最好的办法是警告用户：
window.onbeforeunload = function() { return "Your work will be lost."; };
此页面确实列出了您可以尝试禁用后退按钮的多种方法，但都不能保证：
【讨论】：
覆盖网络浏览器的默认行为通常是个坏主意。出于安全原因，客户端脚本没有足够的权限来执行此操作。
也有人问了一些类似的问题，
您不能实际上禁用了浏览器的后退按钮。但是，您可以使用您的逻辑来做魔术，以防止用户向后导航，这将产生一种好像它被禁用的印象。方法如下 - 查看以下 sn-p。
(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 中，所以它可以在大多数浏览器中工作。它还会禁用 backspace 键，但该键将在 input 字段和 textarea 内正常工作。
将此 sn-p 放在单独的脚本中，并将其包含在您想要此行为的页面上。在当前设置中，它将执行 DOM 的 onload 事件，这是此代码的理想入口点。
在以下浏览器中测试验证，
【讨论】：
location.hash，所以它让我这样做了。可能会有更多改进，但 50 毫秒一次并没有花费我太多，所以我把它留在那里。
我遇到了这个问题，需要一个在各种浏览器上都能正常工作且“很好”的解决方案，包括 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()（我的旧解决方案）在 Mobile Safari 上不起作用 --- 它似乎什么都不做（即用户仍然可以返回）。 history.pushState() 确实适用于所有这些。history.pushState() 的第三个参数是一个 url。传递'no-back-button' 或'pagename' 之类的字符串的解决方案似乎可以正常工作，直到您尝试在页面上刷新/重新加载，此时当浏览器尝试定位页面时会生成“找不到页面”错误以它作为它的 URL。 （浏览器在页面上时也可能在地址栏中包含该字符串，这很难看。）location.href 应该用于 URL。history.pushState() 的第二个参数是一个标题。环顾网络，大多数地方都说它“未使用”，这里的所有解决方案都为此通过null。但是，至少在 Mobile Safari 中，这会将页面的 URL 放入用户可以访问的历史下拉列表中。但是当它正常添加一个页面访问的条目时，它会放入它的title，这是更可取的。因此，为此传递 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.back() 功能。我们希望防止用户点击浏览器的后退按钮，但在某些情况下，我们会在页面上提供自己的后退按钮。有什么办法让它工作吗？
用于限制浏览器返回事件：
window.history.pushState(null, "", window.location.href);
window.onpopstate = function () {
window.history.pushState(null, "", window.location.href);
};
【讨论】：
此代码将禁用支持 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');
});
【讨论】：
no-back-button... （浏览器也很可能在地址栏中显示no-back-button，这看起来很难看。）公平地说，这并不是唯一受此影响的解决方案。 history.pushState() 的第三个参数是 url，并且必须是当前页面的 url：请改用 location.href。
如何阻止后退功能：
history.pushState(null, null, location.href);
window.onpopstate = function () {
history.go(1);
};【讨论】：
在 Chrome 79 中没有一个对我有用的最受好评的答案。看起来 Chrome 在 75 版之后改变了其关于“后退”按钮的行为。请参见此处：
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 的问题是它不会触发 onpopstate 事件 除非您进行浏览器操作（即调用 history.back）。这就是为什么 我已将它们添加到脚本中。
我不完全理解他写的内容，但显然现在需要额外的 history.back() / history.forward() 来阻止 Back in Chrome 75+。
【讨论】：
这是我可以做到的方式。
奇怪的是，更改 window.location 在 Google Chrome 和 Safari 中效果不佳。
location.hash 碰巧没有在 Chrome 和 Safari 的历史记录中创建条目。所以你必须使用 pushstate。
这适用于所有浏览器。
history.pushState({ page: 1 }, "title 1", "#nbb");
window.onhashchange = function (event) {
window.location.hash = "nbb";
};
【讨论】：
$(document).ready(function () { .... });
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
history.pushState(null, null, document.URL);
});
此 JavaScript 代码不允许任何用户返回（适用于 Chrome、Firefox、Internet Explorer 和 Edge）。
【讨论】：
<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>
【讨论】：
event.persisted 是否有一些文档？
对于React项目中的modal组件，modal的open或close，控制浏览器返回是必要的动作。
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
);
【讨论】：
This article on 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'
}
}
}
【讨论】：
此代码已使用最新的 Chrome 和 Firefox 浏览器进行了测试。
<script type="text/javascript">
history.pushState(null, null, location.href);
history.back();
history.forward();
window.onpopstate = function () { history.go(1); };
</script>
【讨论】：
轻松尝试：
history.pushState(null, null, document.title);
window.addEventListener('popstate', function () {
history.pushState(null, null, document.title);
});
【讨论】：
非常简单干净的功能，可以在不干扰页面的情况下打破后退箭头。
好处：
onbeforeunload 的其他解决方案那样的用户干扰
setInterval，因此它不会破坏慢速浏览器并且始终有效。unbeforeunload，它会通过模态对话框打断用户。注意：其他一些解决方案使用onbeforeunload。请不要为此使用onbeforeunload，当用户尝试关闭窗口、点击后退箭头等时，它会弹出一个对话框。onbeforeunload 这样的模态通常只适用于极少数情况，例如就像他们实际上在屏幕上进行了更改并且没有保存它们一样，不是为了这个目的。
工作原理
就是这样。没有进一步的混乱，没有后台事件监控，没有别的。
一秒用完
要部署，只需将其添加到页面或 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>
【讨论】：
在现代浏览器中这似乎可行：
// 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)
【讨论】：
React（类组件）有这个问题。
我轻松解决了：
componentDidMount() {
window.addEventListener("popstate", e => {
this.props.history.goForward();
}
}
我从react-router-dom 使用过HashRouter。
【讨论】：
你可以放一个小脚本然后检查。它不允许您访问上一页。
这是在 JavaScript 中完成的。
<script type="text/javascript">
function preventbackbutton() { window.history.forward(); }
setTimeout("preventbackbutton()", 0);
window.onunload = function () { null };
</script>
当您尝试通过浏览器访问返回或上一页时，window.onunload 函数会触发。
【讨论】：
这似乎对我们禁用了浏览器上的后退按钮以及退格按钮让您返回。
history.pushState(null, null, $(location).attr('href'));
window.addEventListener('popstate', function () {
history.pushState(null, null, $(location).attr('href'));
});
【讨论】：
立即运行代码 sn-p 并尝试返回
history.pushState(null, null, window.location.href);
history.back();
window.onpopstate = () => history.forward();【讨论】：
<script src="~/main.js" type="text/javascript"></script>
<script type="text/javascript">
window.history.forward();
function noBack() {
window.history.forward();
}
</script>
【讨论】：
您根本不能也不应该这样做。但是，这可能会有所帮助：
<script type = "text/javascript" >
history.pushState(null, null, 'pagename');
window.addEventListener('popstate', function(event) {
history.pushState(null, null, 'pagename');
});
</script>
这适用于我的 Google Chrome 和 Firefox。
【讨论】：
尝试这样做以防止 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>
【讨论】：
它基本上将窗口的“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."; };
}
);【讨论】：
只需设置location.hash="Something"。按后退按钮时，哈希将从 URL 中删除，但页面不会返回。
这种方法可以很好地防止意外返回，但出于安全考虑，您应该设计后端以防止重新应答。
【讨论】：
这里的一些解决方案不会阻止后退事件的发生 - 他们让后退事件发生（并且浏览器内存中保存的有关页面的数据丢失）然后他们播放前进事件来尝试隐藏事实刚刚发生了一个后退事件。如果页面保持瞬态，则不成功。
我为 React 编写了这个解决方案（当没有使用 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);
};
}, []);
【讨论】：
我创建了一个 HTML 页面 (index.html)。我还在 script 文件夹/目录中创建了一个 (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>
</b>
</small>
[ <span id="inCountSPN">0</span> ]
</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() +
" - <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>
【讨论】：
在我的例子中，这是一个购物订单。所以我禁用了按钮。当用户单击返回时，该按钮仍然被禁用。当他们再次单击返回时，然后单击页面按钮前进。我知道他们的订单已提交并跳到另一个页面。
在页面实际刷新的情况下，这将使按钮（理论上）可用；然后我能够在页面加载中做出反应，订单已经提交并重定向。
【讨论】：
此代码是完整的 javascript。 将其放在您的主页上或任何您需要的东西上，当有人返回时，它会将他们带到他们之前所在的页面。
<script type="text/javascript">
function preventBack() {
window.history.forward();
}
setTimeout("preventBack()", 0);
window.onunload = function () { null };
</script>
【讨论】：