我正在用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值中获取考试的持续时间。计时器随之启动，但当我输入禁用后退按钮的代码时，它就停止了。我有什么问题?
当前回答
我遇到了这个问题，需要一个在各种浏览器上正确工作的解决方案，包括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() (my old solution) does not work on Mobile Safari --- it seems to do nothing (i.e., the user can still go back). history.pushState() does work on all of them. the third argument to history.pushState() is a url. Solutions which pass a string like 'no-back-button' or 'pagename' seem to work OK, until you then try a Refresh/Reload on the page, at which point a "Page not found" error is generated when the browser tries to locate a page with that as its URL. (The browser is also likely to include that string in the address bar when on the page, which is ugly.) location.href should be used for the URL. the second argument to history.pushState() is a title. Looking around the web most places say it is "not used", and all the solutions here pass null for that. However, in Mobile Safari at least, that puts the page's URL into the history dropdown the user can access. But when it adds an entry for a page visit normally, it puts in its title, which is preferable. So passing document.title for that results in the same behaviour.
其他回答
基于@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)
}
反应
对于React项目中的模态组件，打开或关闭模态，控制浏览器返回是一个必要的动作。
The stopBrowserBack: the stop of the browser back button functionality, also get a callback function. This callback function is what you want to do: const stopBrowserBack = callback => { window.history.pushState(null, "", window.location.href); window.onpopstate = () => { window.history.pushState(null, "", window.location.href); callback(); }; }; The startBrowserBack: the revival of the browser back button functionality: const startBrowserBack = () => { window.onpopstate = undefined; window.history.back(); };
在项目中的使用:
handleOpenModal = () =>
this.setState(
{ modalOpen: true },
() => stopBrowserBack(this.handleCloseModal)
);
handleCloseModal = () =>
this.setState(
{ modalOpen: false },
startBrowserBack
);
只需立即运行代码片段并尝试返回 历史。pushState(null, null, window.location.href); history.back (); 窗口。Onpopstate = () => history.forward();
有很多原因可以解释为什么禁用后退按钮实际上不起作用。最好的办法是警告用户:
window.onbeforeunload = function() { return "Your work will be lost."; };
本页确实列出了一些禁用后退按钮的方法，但都不保证:
http://www.irt.org/script/311.htm
限制浏览器返回事件:
window.history.pushState(null, "", window.location.href);
window.onpopstate = function () {
window.history.pushState(null, "", window.location.href);
};
