Saw*_*hay 137 javascript browser
我正在做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数据库中获取考试时间,并相应地启动计时器,当我把代码禁用后退按钮时它停止.会是什么问题.
Col*_*inE 145
禁用后退按钮无法正常工作的原因有很多.您最好的选择是警告用户:
window.onbeforeunload = function() { return "Your work will be lost."; };
此页面列出了许多可以尝试禁用后退按钮的方法,但没有保证:
http://www.irt.org/script/311.htm
Roh*_*416 120
覆盖Web浏览器的默认行为通常是一个坏主意.出于安全原因,客户端脚本没有足够的权限来执行此操作.
提出的问题也很少,
您实际上无法禁用浏览器后退按钮.但是,您可以使用您的逻辑进行魔术,以防止用户导航回来,这会产生一种类似于禁用的印象.请查看以下代码段.
(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 event bubbling up the DOM tree..
e.stopPropagation();
};
}
})(window);
这是纯JavaScript,所以它适用于大多数浏览器.它还会禁用退格键,但键在input字段内正常工作textarea.
将此代码段放在单独的脚本中,并将其包含在您希望此行为的页面上.在当前设置中,它将执行onloadDOM事件,这是此代码的理想入口点.
在以下浏览器中经过测试和验证,
小智 67
<script>
window.location.hash="no-back-button";
window.location.hash="Again-No-back-button";//again because google chrome don't insert first hash into history
window.onhashchange=function(){window.location.hash="no-back-button";}
</script>
Jon*_*ave 59
我遇到了这一点,它需要正确和各种浏览器的"好听"工作的解决方案,包括移动版Safari(iOS9在发布的时间).没有一个解决方案是正确的.我提供以下内容(在IE11,FireFox,Chrome和Safari上测试):
history.pushState(null, document.title, location.href);
window.addEventListener('popstate', function (event)
{
history.pushState(null, document.title, location.href);
});
请注意以下事项:
history.forward()(我的旧解决方案)在Mobile Safari上不起作用---它似乎什么都不做(即用户仍然可以返回).history.pushState()对所有这些都有效.history.pushState()是一个网址.传递字符串'no-back-button'或'pagename'似乎工作正常的解决方案,直到您在页面上尝试刷新/重新加载,此时当浏览器尝试找到具有该URL作为其Url的页面时,会生成"找不到页面"错误.(浏览器也可能在页面上的地址栏中包含该字符串,这很丑陋.)location.href应该用于Url.history.pushState()是标题.环顾网络,大多数地方都说"没有使用",所有解决方案都在这里通过null.但是,至少在Mobile Safari中,将页面的Url放入用户可以访问的历史记录下拉列表中.但是当它为正常的页面访问添加一个条目时,它会放入标题,这是更可取的.因此,传递document.title会导致相同的行为.Jer*_*rne 27
此代码将禁用支持HTML5 History API的现代浏览器的后退按钮.在正常情况下,按下后退按钮会返回上一页.如果使用history.pushState(),则开始向当前页面添加额外的子步骤.它的工作方式是,如果你使用history.pushState()三次,然后开始按下后退按钮,前三次它将导航回这些子步骤,然后第四次它将返回到上一页.
如果将此行为与事件上的事件侦听器结合使用popstate,则实际上可以设置无限循环的子状态.所以,你加载页面,按子状态,然后点击后退按钮,弹出一个子状态,并推动另一个,所以如果你再次按下后退按钮,它将永远不会用完子状态推.如果你认为有必要禁用后退按钮,这将使你到达那里.
history.pushState(null, null, 'no-back-button');
window.addEventListener('popstate', function(event) {
history.pushState(null, null, 'no-back-button');
});
gen*_* b. 16
在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+ 中的返回。
San*_*tos 12
这是我实现它的方式.很奇怪改变window.location在chrome和safari中没有用.发生location.hash不会在chrome和safari的历史记录中创建条目.所以你必须使用pushstate.这适用于所有浏览器.
history.pushState({ page: 1 }, "title 1", "#nbb");
window.onhashchange = function (event) {
window.location.hash = "nbb";
};
<html>
<head>
<title>Disable Back Button in Browser - Online Demo</title>
<style type="text/css">
body, input {
font-family: Calibri, Arial;
}
</style>
<script type="text/javascript">
window.history.forward();
function noBack() {
window.history.forward();
}
</script>
</head>
<body onload="noBack();" onpageshow="if (event.persisted) noBack();" onunload="">
<H2>Demo</H2>
<p>This page contains the code to avoid Back button.</p>
<p>Click here to Goto <a href="noback.html">NoBack Page</a></p>
</body>
</html>
小智 9
history.pushState(null, null, location.href);
window.onpopstate = function () {
history.go(1);
};
小智 9
对于限制浏览器后退事件
window.history.pushState(null, "", window.location.href);
window.onpopstate = function () {
window.history.pushState(null, "", window.location.href);
};
小智 9
对于 React 项目中的模态组件，模态的打开或关闭，控制浏览器返回是一个必要的动作。
的stopBrowserBack：的浏览器后退按钮功能停止，还可以得到一个回调函数。这个回调函数是你想要做的：
const stopBrowserBack = callback => {
window.history.pushState(null, "", window.location.href);
window.onpopstate = () => {
window.history.pushState(null, "", window.location.href);
callback();
};
};
的startBrowserBack：的浏览器后退按钮功能的复兴：
const startBrowserBack = () => {
window.onpopstate = undefined;
window.history.back();
};
在您的项目中的用法：
handleOpenModal = () =>
this.setState(
{ modalOpen: true },
() => stopBrowserBack(this.handleCloseModal)
);
handleCloseModal = () =>
this.setState(
{ modalOpen: false },
startBrowserBack
);
这篇关于jordanhollinger.com的文章是我觉得最好的选择.与Razor的答案类似,但更清楚一点.代码如下; 完全归功于Jordan Hollinger:
页面之前:
<a href="/page-of-no-return.htm#no-back>You can't go back from the next page</a>
不归路的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'
}
}
}
小智 7
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
history.pushState(null, null, document.URL);
});
此JavaScript不允许任何用户返回（可在Chrome，FF，IE，Edge中使用）
小智 7
此代码已使用最新的 Chrome 和 Firefox 浏览器进行了测试。
<script type="text/javascript">
history.pushState(null, null, location.href);
history.back();
history.forward();
window.onpopstate = function () { history.go(1); };
</script>
轻松尝试:
history.pushState(null, null, document.title);
window.addEventListener('popstate', function () {
history.pushState(null, null, document.title);
});
| 归档时间： |
|
| 查看次数： |
451452 次 |
| 最近记录： |