我正在用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值中获取考试的持续时间。计时器随之启动，但当我输入禁用后退按钮的代码时，它就停止了。我有什么问题?
当前回答
基于@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)
}
其他回答
尝试以下方法来防止ie浏览器中的退格键默认为“后退”:
<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>
有很多原因可以解释为什么禁用后退按钮实际上不起作用。最好的办法是警告用户:
window.onbeforeunload = function() { return "Your work will be lost."; };
本页确实列出了一些禁用后退按钮的方法，但都不保证:
http://www.irt.org/script/311.htm
经历了大多数现有的答案，没有解决方案，工作在chrome。
这个想法是让浏览器在会话历史中向前移动一页，有效地防止使用后退浏览器按钮离开该页。通过调用History.forward()方法，在页面中放置下面的行，可以做到这一点。
window.history.forward();
我在mdn web docs找到了这个解决方案，它在chrome中工作。
轻松尝试一下:
history.pushState(null, null, document.title);
window.addEventListener('popstate', function () {
history.pushState(null, null, document.title);
});
如果你使用React，你可以使用NPM模块:use-history-back-trap。这是一个自定义的React钩子，它拦截向后导航，并允许在需要时恢复它。
用法超级简单:
const SomeFunctionalReactComponent = () => {
useHistoryBackTrap(approveNavigation)
// ...
}
其中approveNavigation是你的函数，当你想继续向后导航时，它返回true(或Promise)。
