使用 jQuery/Javascript 防止任何形式的页面刷新

一旦用户在我的页面上,我不希望他刷新页面。

  1. 任何时候,用户点击顶部的 F5或刷新按钮。他应该得到一个警告说

    无法刷新页面。

  2. 此外,如果用户打开一个新的标签,并试图访问相同的网址在 prev 标签,他应该得到一个警报

    不能在两个选项卡中打开同一页

无论如何,我可以使用 JavaScript 或 jQuery 来做到这一点,第一点非常重要。

305305 次浏览

不,没有。

我很确定没有办法拦截来自 JS 的点击刷新按钮,即使有,也可以关闭 JS。

你也许应该 从你的 X (阻止刷新)后退一步,找到一个不同的解决方案的 Y (不管是什么)。

您不能阻止用户刷新,也不应该真的尝试。你应该回到 为什么,你需要这个解决方案,这里的根本问题是什么?.从这里开始,找到一种不同的方法来解决这个问题。也许是你详细阐述了为什么你认为你需要这样做,它将有助于找到这样一个解决方案。

打破浏览器的基本功能从来都不是一个好主意,超过99.999999999% 的互联网工作和刷新 F5,这是一个 期望的用户,一个你不应该打破。

# 1可以通过 window.onbeforeunload实现。

例如:

<script type="text/javascript">
window.onbeforeunload = function() {
return "Dude, are you sure you want to leave? Think of the kittens!";
}
</script>

用户将被提示与消息,并给予一个选项留在页面上或继续他们的方式。这种情况越来越普遍了。如果您在键入文章时试图从页面导航离开,StackOverflow 会执行此操作。您不能完全阻止用户重新加载,但是如果他们这样做,您可以让它听起来非常可怕。

第二点或多或少是不可能的。即使您跟踪会话和用户登录,仍然不能保证正确检测到第二个选项卡。例如,也许我有一个窗口打开,然后关闭它。现在我打开了一扇新的窗户。即使我已经关闭了第一个选项卡,您也可能会检测到第二个选项卡。现在您的用户无法访问第一个窗口,因为他们关闭了该窗口,而且他们无法访问第二个窗口,因为您拒绝了他们。

事实上,我所在银行的在线系统非常努力地在做第二件事,上面描述的情况一直在发生。我通常必须等到服务器端会话到期后才能再次使用银行系统。

尽管禁用 F5键不是一个好主意,但是你可以在 JQuery 中这样做,如下所示。

<script type="text/javascript">
function disableF5(e) { if ((e.which || e.keyCode) == 116 || (e.which || e.keyCode) == 82) e.preventDefault(); };


$(document).ready(function(){
$(document).on("keydown", disableF5);
});
</script>

希望这个能帮上忙!

数字(2)可以通过使用一个套接字实现(如 websocket、 socket.io 等)为用户参与的每个会话定制心跳来实现。如果一个用户试图打开另一个窗口,您需要一个 javascript 处理程序检查服务器是否正常,然后用错误消息进行响应。

然而,一个更好的解决方案是同步两个会话,如果可能的话,像在谷歌文档。

回到过去的 CGI 时代,我们有很多触发各种后端操作的表单。例如向组发送文本通知、打印作业、数据耕种等。

如果用户在一个页面上说: “请等待... 执行一些巨大的工作,可能需要一些时间。”.他们更有可能点击刷新,这将是坏的!

为什么? 因为这会引发更多的慢工作,最终使整个事情陷入困境。

解决办法? Allow them to do their form. 当他们提交他们的表单... 启动您的工作,然后引导他们到另一个页面,告诉他们等待。

中间的页面实际上保存着启动作业所需的表单数据。 然而,WAIT 页面包含一个 javascript 历史销毁。因此,他们可以随心所欲地重新装载那个等待页面,而且它永远不会触发原始作业在后台启动,因为那个 WAIT 页面只包含 WAIT 本身所需的表单数据。

希望你能理解。

历史记录破坏功能也阻止他们单击 BACK 然后刷新。

它非常天衣无缝,工作了很多年,直到非营利组织被清盘。

例如: 表格输入-收集他们的所有信息,当提交,这触发您的后端作业。

RESPONSE from form entry-返回 HTML,它执行重定向到静态等待页面和/或 POST/GET 到另一个表单(WAIT 页面)的操作。

WAIT PAGE-仅包含与等待页面相关的 FORM 数据以及用于销毁最新历史记录的 javascript。比如(-1 OR -2) ,只销毁最近的页面,但是仍然允许它们返回到原始的 FORM 入口页面。

一旦他们到达您的 WAIT 页面,他们就可以随心所欲地单击 REFRESH,而且它永远不会在后端产生原始的 FORM 作业。相反,您的 WAIT 页面应该包含 META 定时刷新本身,这样它就可以始终检查他们的作业状态。当它们的作业完成后,它们将从等待页面重定向到您希望的任何位置。

如果他们手动刷新... 他们只是增加了一个简单的检查他们的工作状态在那里。

希望能帮上忙,祝你好运。

现在可以使用 BroadcastAPI解决问题 # 2。

目前它只能在 Chrome,Firefox 和 Opera 中使用。

var bc = new BroadcastChannel('test_channel');


bc.onmessage = function (ev) {
if(ev.data && ev.data.url===window.location.href){
alert('You cannot open the same page in 2 tabs');
}
}


bc.postMessage(window.location.href);