使用 jQuery/Javascript 防止任何形式的页面刷新
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3527041/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent any form of page refresh using jQuery/Javascript
提问by pankaj
Once the user is on my page, I do not want him to refresh the page.
一旦用户在我的页面上，我不希望他刷新页面。
Anytime, the user hits F5or refresh button on top. He should get an alert saying
You cannot refresh the page.
Also if the user opens a new tab and tries to access the same url in prev tab he should get an alert
You cannot open same page in 2 tabs
任何时候，用户点击F5或刷新顶部的按钮。他应该得到一个警报说
您无法刷新页面。
此外，如果用户打开一个新选项卡并尝试访问上一个选项卡中的相同网址，他应该收到警报
您不能在 2 个选项卡中打开同一页面
Anyway I can do this using JavaScript or jQuery? Point one is really important.
无论如何，我可以使用 JavaScript 或 jQuery 来做到这一点吗？第一点真的很重要。
回答by Seth
#1 can be implemented via window.onbeforeunload.
#1 可以通过window.onbeforeunload.
For example:
例如：
<script type="text/javascript">
window.onbeforeunload = function() {
return "Dude, are you sure you want to leave? Think of the kittens!";
}
</script>
The user will be prompted with the message, and given an option to stay on the page or continue on their way. This is becoming more common. Stack Overflow does this if you try to navigate away from a page while you are typing a post. You can't completely stop the user from reloading, but you can make it sound real scary if they do.
用户将收到消息提示，并提供留在页面上或继续前进的选项。这变得越来越普遍。如果您在键入帖子时尝试离开页面，则 Stack Overflow 会执行此操作。你不能完全阻止用户重新加载，但如果他们这样做，你可以让它听起来很可怕。
#2 is more or less impossible. Even if you tracked sessions and user logins, you still wouldn't be able to guarantee that you were detecting a second tab correctly. For example, maybe I have one window open, then close it. Now I open a new window. You would likely detect that as a second tab, even though I already closed the first one. Now your user can't access the first window because they closed it, and they can't access the second window because you're denying them.
#2 或多或少是不可能的。即使您跟踪会话和用户登录，您仍然无法保证您正确检测到第二个选项卡。例如，也许我打开了一个窗口，然后将其关闭。现在我打开一个新窗口。即使我已经关闭了第一个选项卡，您也可能会将其检测为第二个选项卡。现在您的用户无法访问第一个窗口，因为他们关闭了它，并且他们无法访问第二个窗口，因为您拒绝了他们。
In fact, my bank's online system tries real hard to do #2, and the situation described above happens all the time. I usually have to wait until the server-side session expires before I can use the banking system again.
事实上，我银行的在线系统真的很努力地做#2，而且上面描述的情况一直在发生。我通常必须等到服务器端会话过期才能再次使用银行系统。
回答by Nick Craver
You can't prevent the user from refreshing, nor should you really be trying. You should go back to whyyou need this solution, what's the root problem here?. Start there and find a different way to go about solving the problem. Perhaps is you elaborated on why you think you need to do this it would help in finding such a solution.
你不能阻止用户刷新，你也不应该真的去尝试。你应该回到为什么你需要这个解决方案，这里的根本问题是什么？。从那里开始，找到解决问题的不同方法。也许您详细说明了为什么您认为需要这样做，这将有助于找到这样的解决方案。
Breaking fundamental browser features is never a good idea, over 99.999999999% of the internet works and refreshes with F5, this is an expectationof the user, one you shouldn't break.
打破基本的浏览器功能从来都不是一个好主意，超过 99.999999999% 的互联网工作并使用 F5 刷新，这是用户的期望，你不应该打破。
回答by Todd
Back in the ole days of CGI we had many forms that would trigger various backend actions. Such as text notifications to groups, print jobs, farming of data, etc.
回到 CGI 的旧时代，我们有许多表单可以触发各种后端操作。例如对组的文本通知、打印作业、数据农业等。
If the user was on a page that was saying "Please wait... Performing some HUGE job that could take some time.". They were more likely to hit REFRESH and this would be BAD!
如果用户在一个页面上说“请稍候......执行一些可能需要一些时间的巨大工作。”。他们更有可能点击刷新，这将是糟糕的！
WHY? Because it would trigger more slow jobs and eventually bog down the whole thing.
为什么？因为它会触发更多缓慢的工作并最终使整个事情陷入困境。
The solution? Allow them to do their form. When they submit their form... Start your job and then direct them to another page that tells them to wait.
解决方案？允许他们做他们的形式。当他们提交表单时... 开始您的工作，然后将他们定向到另一个页面，告诉他们等待。
Where the page in the middle actually held the form data that was needed to start the job. The WAIT page however contains a javascript history destroy. So they can RELOAD that wait page all they want and it will never trigger the original job to start in the background as that WAIT page only contains the form data needed for the WAIT itself.
中间的页面实际上保存了启动作业所需的表单数据。然而，WAIT 页面包含一个 javascript 历史销毁。因此，他们可以随心所欲地重新加载该等待页面，并且它永远不会触发原始作业在后台启动，因为该 WAIT 页面仅包含 WAIT 本身所需的表单数据。
Hope that makes sense.
希望这是有道理的。
The history destroy function also prevented them from clicking BACK and then refreshing as well.
历史销毁功能也阻止了他们点击返回然后刷新。
It was very seamless and worked great for MANY MANY years until the non-profit was wound down.
它非常无缝，并且在非营利组织倒闭之前已经运行了很多年。
Example: FORM ENTRY - Collect all their info and when submitted, this triggers your backend job.
示例：FORM ENTRY - 收集他们的所有信息，并在提交时触发您的后端工作。
RESPONSE from form entry - Returns HTML that performs a redirect to your static wait page and/or POST/GET to another form (the WAIT page).
来自表单条目的响应 - 返回执行重定向到静态等待页面和/或 POST/GET 到另一个表单（等待页面）的 HTML。
WAIT PAGE - Only contains FORM data related to wait page as well as javascript to destroy the most recent history. Like (-1 OR -2) to only destroy the most recent pages, but still allows them to go back to their original FORM entry page.
等待页面 - 仅包含与等待页面相关的 FORM 数据以及用于销毁最近历史记录的 javascript。像 (-1 OR -2) 仅销毁最近的页面，但仍允许它们返回到原始的 FORM 条目页面。
Once they are at your WAIT page, they can click REFRESH as much as they want and it will never spawn the original FORM job on the backend. Instead, your WAIT page should embrace a META timed refresh itself so it can always check on the status of their job. When their job is completed, they are redirected away from the wait page to whereever you wish.
一旦他们进入您的 WAIT 页面，他们就可以根据需要单击 REFRESH，并且它永远不会在后端生成原始的 FORM 作业。相反，您的 WAIT 页面应该包含一个 META 定时刷新本身，以便它可以始终检查他们的工作状态。当他们的工作完成后，他们会从等待页面重定向到您希望的任何位置。
If they do manually REFRESH... They are simply adding one more check of their job status in there.
如果他们手动刷新...他们只是在那里再添加一项对他们的工作状态的检查。
Hope that helps. Good luck.
希望有帮助。祝你好运。
回答by Nilesh
Although its not a good idea to disable F5 key you can do it in JQuery as below.
尽管禁用 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>
Hope this will help!
希望这会有所帮助！
回答by Quentin
No, there isn't.
不，没有。
I'm pretty sure there is no way to intercept a click on the refresh button from JS, and even if there was, JS can be turned off.
我很确定没有办法拦截来自 JS 的刷新按钮的点击，即使有，也可以关闭 JS。
You should probably step back from your X (preventing refreshing) and find a different solution to Y (whatever that might be).
回答by seo
Number (2) is possible by using a socket implementation (like websocket, socket.io, etc.) with a custom heartbeat for each session the user is engaged in. If a user attempts to open another window, you have a javascript handler check with the server if it's ok, and then respond with an error messages.
数字 (2) 可以通过使用套接字实现（如 websocket、socket.io 等）以及用户参与的每个会话的自定义心跳来实现。如果用户尝试打开另一个窗口，您将有一个 javascript 处理程序检查如果没问题，请与服务器联系，然后以错误消息响应。
However, a better solution is to synchronize the two sessions if possible like in google docs.
但是，更好的解决方案是尽可能像在 google docs 中一样同步两个会话。
回答by RockLegend
Issue #2 now can be solved using BroadcastAPI.
现在可以使用BroadcastAPI解决问题 #2 。
At the moment it's only available in Chrome, Firefox, and Opera.
目前它仅在 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);
