我正在用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)
}
其他回答
在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的问题是它不会触发onpopstate事件 除非你做出浏览器动作(即调用history.back)。这就是为什么 我已经将这些添加到脚本中。
我不完全明白他写了什么，但显然现在需要一个额外的history.back() / history.forward()来阻止Chrome 75+中的返回。
对我来说，这是一个购物订单。所以我禁用了按钮。当用户单击返回时，该按钮仍然被禁用。当他们再次点击返回，然后点击页面按钮继续前进时。我知道他们的订单已经提交，然后跳转到另一页。
在页面实际刷新的情况下，将使按钮(理论上)可用;然后，我能够在页面加载反应，订单已经提交，然后也重定向。
我有这个问题与React(类组件)。
我很容易就解决了:
componentDidMount() {
window.addEventListener("popstate", e => {
this.props.history.goForward();
}
}
我已经从react-router-dom中使用了HashRouter。
<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>
只需立即运行代码片段并尝试返回 历史。pushState(null, null, window.location.href); history.back (); 窗口。Onpopstate = () => history.forward();
