JavaScript - 阻止用户使用 F5 刷新页面

最新推荐文章于 2024-05-27 21:57:07 发布
最新推荐文章于 2024-05-27 21:57:07 发布
阅读量1.2k 收藏 1
点赞数 2
分类专栏： HTML & CSS & JavaScript 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29761395/article/details/116420903
版权

文章目录

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>阻止用户使用 F5 刷新</title>
    </head>
    <body>
        <textarea rows="8" cols="100" value="123">此方法只能阻止用户使用 F5 刷新页面！</textarea>
        
        <script type="text/javascript">
            window.onkeydown = (event) => {
                console.log(event, window.event)
                // if (!event) {
                //     event = window.event
                // }
                if (!event || !event.isTrusted || !event.cancelable) {
                    return
                }
                
                const key = event.key
                if (key === 'F5') {
                    alert(key)
                    event.preventDefault()
                    event.returnValue = false
                }
            }
        </script>
    </body>
</html>

参考

JavaScript阻止浏览器F5刷新

Web APIs - Document - Document: keydown event

Web APIs - Event - Event.preventDefault()

Web APIs - Event - Event.cancelable

好好活着，不要熬夜
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript经典特效---禁止刷新页面.rar
03-08
这个"javascript经典特效---禁止刷新页面.rar"压缩包文件包含了一个示例，展示了如何使用JavaScript来阻止浏览器的刷新操作。 首先，我们需要理解浏览器的刷新事件。在HTML中，当用户点击浏览器的刷新按钮或者按下...
禁止页面刷新让F5快捷键及右键都无效
09-04
总的来说，这种技术可以防止用户通过常规方式刷新页面，但应当谨慎使用，因为它可能影响用户的正常浏览体验。在实际应用中，更好的做法可能是提供明确的提示告知用户当前操作不可刷新，或者在需要防止刷新的特定阶段...
屏蔽 F5 刷新键(js)
08-30 100
document.onkeydown = function(){ var k = window.event.keyCode; if (k == 116){ //屏蔽 F5 刷新键 window.event.keyCode = 0; window.event.returnValue= false; }} 
JavaScript屏蔽F5键
为天加朵云...
08-01 572
JavaScript屏蔽F5键代码如下<!-- function document.onkeydown() { if ( event.keyCode==116) { event.keyCode = 0; event.cancelBubble = true; return false;
javascript 浏览器中屏蔽F5键的有效方法
最新发布
foryoustudio的博客
05-27 141
【代码】javascript 浏览器中屏蔽F5键的有效方法。
JS阻止浏览器F5刷新
ScreenshotOfSeed的博客
08-25 458
阻止F5刷新 stopF5Refresh() { document.onkeydown = function (e) { var evt = window.event || e; var code = evt.keyCode || evt.which; if (code == 116) { if (evt.preventDefault) { evt.preventDefault();
js设置禁止浏览器刷新，右键和F5键
总结前端开发中遇到的问题，分享前端知识
09-10 4030
$(document).bind("keydown", function(e) { e = window.event || e;//解决浏览器兼容的问题 if(e.keyCode == 116) {//F5按下 　　e.keyCode = 0; 　　return false; }else{ 　　//刷新 } });
JS禁止F5刷新
Daniel的博客
03-29 5085
//禁止用F5键  function document.onkeydown()  {  if ( event.keyCode==116)  {  event.keyCode = 0;  event.cancelBubble = true;  return false;  }  }  //禁止右键弹出菜单  function document.oncontextmenu()
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
10-22
在网页开发中，有时出于特定需求，我们可能需要禁用某些用户交互行为，例如禁用键盘的后退键（F5或Backspace）、屏蔽右键单击菜单以及阻止页面的刷新动作。这篇内容将详细解释如何使用jQuery实现这些功能。 1. **...
js禁止页面刷新与后退的方法
10-24
JavaScript可以通过监听键盘事件来阻止F5键（其keyCode为116）的默认行为。以下是一个简单的示例： ```javascript document.onkeydown = function(event) { if (event.keyCode === 116) { event.preventDefault...
网页刷新页面
10-20
首先，让我们来了解“网页刷新页面”的概念。在网页浏览过程中，用户有时需要重新加载当前页面以获取最新的数据或纠正可能出现的错误。这可以通过点击浏览器上的刷新按钮、使用快捷键（如F5）或者通过编程方式实现。...
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
10-26
刷新禁止用F5键刷新禁止右键这些在某些特殊情况下还是比较实用的，下面有个不错的示例，感兴趣的朋友可以参考下
禁止F5等快捷键的JS代码
10-31
禁止F5等快捷键的JS代码
禁止用户刷新，前进页面
12-25
有时候在WEB中点击按钮提交时，不希望用户刷新页面，和前进
JavaScript阻止浏览器F5刷新
热门推荐
水煮蜗牛
08-07 1万+
前几天的项目用到一个小功能，用js来阻住用户在键盘上按F5刷新，这个功能不难，主要就是获取键盘事件，如果是按的F5则阻止就好了。话不多说直接上代码。
JS屏蔽功能类(屏蔽F5，退格键，空格键)
weixin_30950607的博客
07-16 82
以下为代码部分: 1.屏蔽功能类 1.1 屏蔽键盘所有键 <script language="javascript"> <!-- function document.onkeydown(){ event.keyCode = 0; event.returnvalue = false; } --> </script> 1.2 屏蔽鼠标右键 在body标签里加上onc...
js禁止、启用刷新
梦华空影的博客
10-24 213
<script type="text/javascript"> //禁止刷新 function jinzhiSX(){ //禁止F5键 document.onkeydown = function(){ if(event.keyCode==116){ event.keyCode = 0; event.cancelBubble = true; re...
JS禁止F5刷新页面
Anticlimax
09-04 2824
禁止F5刷新 https://blog.csdn.net/xgxmwang/article/details/24785341 禁止浏览器的刷新按钮 https://www.jb51.net/article/37732.htm 微信浏览器中的刷新按钮无法监听,无法隐藏. 无法监听刷新时间另一种方法可以解决: 每次在页面生成一个随机数存在数据库里,每次页面刷新更新随机数,和数据库比较是否和上次...
Vue-Native-Websocket使用F5刷新页面后断联
07-13
Vue-Native-Websocket 在 F5 刷新页面后断开连接的问题可能是由于页面刷新导致 Vue 实例重新创建，从而导致 WebSocket 实例也被重新创建。为了解决这个问题，你可以尝试使用 Vue.js 的生命周期钩子函数来处理 WebSocket 的连接和断开逻辑。 一种常见的做法是将 WebSocket 实例作为 Vue 组件的一个属性，然后在组件的 created 钩子函数中创建 WebSocket 连接，在 destroyed 钩子函数中关闭 WebSocket 连接。这样在页面刷新时，会先销毁旧的 WebSocket 连接，然后再创建新的连接。 以下是一个示例代码： ```javascript // 在 Vue 组件中定义 WebSocket 属性 data() { return { websocket: null } }, created() { // 创建 WebSocket 连接 this.websocket = new WebSocket('ws://your-websocket-url'); // 监听 WebSocket 事件，处理收到的消息等逻辑 this.websocket.onmessage = (event) => { // 处理收到的消息 }; }, destroyed() { // 关闭 WebSocket 连接 this.websocket.close(); } ``` 通过上述代码，你可以在 Vue 组件中使用 WebSocket，并且在页面刷新时正确地处理连接和断开逻辑。请注意根据你的具体需求进行适当的调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值