我正在用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值中获取考试的持续时间。计时器随之启动，但当我输入禁用后退按钮的代码时，它就停止了。我有什么问题?
当前回答
你不能也不应该这么做。然而，这可能会有所帮助:
<script type = "text/javascript" >
history.pushState(null, null, 'pagename');
window.addEventListener('popstate', function(event) {
history.pushState(null, null, 'pagename');
});
</script>
这在我的谷歌Chrome和Firefox中工作。
其他回答
我遇到了这个问题，需要一个在各种浏览器上正确工作的解决方案，包括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.
我创建一个HTML页面(index.html)。我还在脚本文件夹/目录中创建了一个one (mechanism.js)。然后，根据需要使用form、table、span和div标记将所有内容放在(index.html)中。现在，这里有一个技巧，可以让后退/前进什么都不做!
首先，你只有一页!其次，使用JavaScript与span / div标签隐藏和显示内容在同一页面上，当需要通过常规链接!
在“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>
and
<a href="#" style="color:#119;font-size:11px;text-decoration:none;letter-spacing:1px;" onclick="HiddenTextsManager(1);">Introduction</a>
如果你使用React，你可以使用NPM模块:use-history-back-trap。这是一个自定义的React钩子，它拦截向后导航，并允许在需要时恢复它。
用法超级简单:
const SomeFunctionalReactComponent = () => {
useHistoryBackTrap(approveNavigation)
// ...
}
其中approveNavigation是你的函数，当你想继续向后导航时，它返回true(或Promise)。
这是我为谷歌查询“禁用后退按钮”获得的第一个命中。我的用例与最初发布的问题略有不同。我需要“禁用后退按钮”的用户已登录的一个安全的网站(即防止一个用户从注销，然后另一个用户能够从以前的用户通过点击后退按钮查看信息)。
简而言之，这里的目标是防止用户在登录的用户注销后看到应用程序页面。
这可以通过向经过身份验证的应用程序的页面中添加如下所示的代码来实现。
下面是使用Apache Shiro的完整示例:
https://github.com/NACHC-CAD/web-security-example/releases/tag/v2.0.0
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />
<script>
if(performance.navigation.type == 2){
console.log("Doing reload");
location.reload(true);
console.log("Done with reload");
}
console.log("Script loaded.")
</script>
只需设置location.hash="Something"。在按下返回按钮时，散列将从URL中删除，但页面不会返回。
此方法用于防止意外返回，但出于安全性考虑，您应该设计用于防止应答的后端。
