我正在用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值中获取考试的持续时间。计时器随之启动，但当我输入禁用后退按钮的代码时，它就停止了。我有什么问题?
当前回答
这段代码在最新的Chrome和Firefox浏览器上进行了测试。
<script type="text/javascript">
history.pushState(null, null, location.href);
history.back();
history.forward();
window.onpopstate = function () { history.go(1); };
</script>
其他回答
重写web浏览器的默认行为通常不是一个好主意。出于安全原因，客户端脚本没有足够的特权来执行此操作。
还有一些类似的问题，
如何防止退格键导航回? 我如何可以防止浏览器的默认历史后退动作退格按钮与JavaScript?
你不能禁用浏览器的后退按钮。然而，你可以使用你的逻辑来阻止用户返回，这将创造一个像它被禁用的印象。这是如何-检查以下片段。
(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，所以它可以在大多数浏览器中工作。它也会禁用退格键，但该键将在输入字段和文本区域内正常工作。
建议设置:
将此片段放在单独的脚本中，并将其包含在需要此行为的页面上。在当前设置中，它将执行DOM的onload事件，这是这段代码的理想入口点。
工作演示!
它在以下浏览器中进行了测试和验证，
铬。 Firefox。 ie浏览器(8-11)和Edge。 Safari。
基于@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)
}
只需立即运行代码片段并尝试返回 历史。pushState(null, null, window.location.href); history.back (); 窗口。Onpopstate = () => history.forward();
我觉得jordanhollinger.com上的这篇文章是最好的选择。与Razor的答案相似，但更清楚一些。下面的代码;全部归功于Jordan Hollinger:
页面:
<a href="/page-of-no-return.htm#no-back>You can't go back from the next page</a>
no return的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>
