首页 > 其他分享 >js阻止浏览器刷新,以防误操作丢失数据

js阻止浏览器刷新,以防误操作丢失数据

时间:2023-11-28 19:58:08浏览次数:28  
标签:code return js window && false 浏览器 true 误操作

//禁用回退
window.history.forward(1); history.pushState(null, null, document.URL); window.addEventListener('popstate', function () { history.pushState(null, null, document.URL); }); //按键判断是否点了刷新相关的按键 document.onkeydown = function(e) { console.log(e.code); console.log(e.ctrlKey); e = e||window.event; console.log(e.code); console.log(e.ctrlKey); var k = e.keyCode; if ((e.ctrlkey === true && k === 82) || (k === 116) || (e.ctrlKey === true && k === 116) || k === 114) { e.code = 0; alert("当前页面不能刷新!"); //e.returnValue = false; e.preventDefault(); e.cancelBubble = true; return false; } if (k === 8) { alert("不能返回或后退!"); e.code = 0; // e.returnValue = false; e.preventDefault(); return false; } //屏蔽 Ctrl+n验证可以实现效果 if (e.ctrlKey && k === 78) { e.code = 0; // e.returnValue = false; e.preventDefault(); e.cancelBubble = true; return false; } //屏蔽F11验证可以实现效果 if (k === 122) { e.code = 0; e.preventDefault(); e.cancelBubble = true; return false; } //屏蔽 shift+F10 验证可以实现效果 if ((e.shiftKey && k === 121) || (e.ctrlKey && k === 121)) { e.code = 0; e.preventDefault(); e.cancelBubble = true; return false; } //屏蔽Alt+F4 if ((e.altKey) && (k === 115)) { window.showModelessDialog("about : blank", "", "dialogwidth:1px;dialogheight :1px"); e.code = 0; e.preventDefault(); e.cancelBubble = true; return false; } //屏 Alt+ 方向键 + ;屏 Alt+ 方向键 !验证 if ((e.altKey) && ((k === 37) || (k === 39))) { alert("不准你使用ALT+方向键前进或后退网页!"); e.code = 0; e.preventDefault(); e.cancelBubble = true; return false } } //屏蔽右键菜单,!验证 document.oncontextmenu = function(event) { if (window.event) { event = window.event; } try { var the = event.target||event.srcElement; return (the.tagName === "INPUT" && thetype.tolowerCase() === "text") || the.tagName === "TEXTAREA"; } catch (e) { return false; } } //地址栏或刷新按钮点击都会触发该事件 弹出确认是否刷新 window.onbeforeunload = function(e) { var dialogText = "重新加载页面会丢失当前进度的答案,如无必要请取消操作"; e.returnValue = dialogText; return dialogText; };

只要使用最后一段unload事件可以防止无意刷新文档。会弹出框确认,一般可以减少误操作。

标签:code,return,js,window,&&,false,浏览器,true,误操作
From: https://www.cnblogs.com/thingk/p/17862825.html

相关文章

  • quickjs调用C函数
    QuickJS调用C函数,这个可以参考官方的std、os进行实现。外部库core.h1#include<string.h>2#include"quickjs-libc.h"3#include"cutils.h"45externJSModuleDef*js_init_module_core(JSContext*ctx,constchar*module_name);core.c1#include&qu......
  • java.lang.ClassNotFoundException: javax.servlet.jsp.jstl.core.LoopTag问题的解决
    问题描述问题解决将这个依赖:改成这个依赖:......
  • CommonJS模块和ECMAScript模块
    CommonJS(简称cjs),为node.js打包javaScript的原始方法,使用require和imports(module.exports)语句定义模块ECMAScript模块(简称esm),是ecma262标准下封装的JavaScript代码重用的官方标准格式。使用import和export语句定义模块 -cjs只有在node.js环境使用。-esm在node.js和浏览器......
  • emscripten 中c 代码引用外部js 函数
    主要是一个简单的学习,webassebly支持通过import调用环境的函数(比如调用浏览器或者nodejs中的一些方法)简单说明方法很多,包含了emscripten提供的调用js的宏,但是以下使用了一个emscripten提供的--js-library功能--js-library简单说明--js-library主要是实现emcc在编......
  • Python-JSON文件操作简化的工具库,支持读取和修改
    这是一个关于python操控json的工具类可以利用get方法以路径的形式查看内容,输出的格式为列表或字典change方法用于修改指定路径下的内容,支持修改内容为字典和列表的形式修改后使用save方法进行保存以下是代码:importjsonimporttimeimportrandomclassError_message:......
  • 常用three.js
    添加背景图varurls=['1.png','1.png','1.png','1.png','1.png','1.png',];scene.background=newTHREE.CubeTextureLoader().setPath('/').load(urls)添加雾scene.fog=newTHREE.Fog(0xcccccc,......
  • json-server的增删改查与基本使用
    1.查看是否安装node2.查看是否安装npm3.安装json-server4.查看json-server的版本5.json-server--watchdb.json6.配置db.json文件下载 apifoxjson-server的增删改查在apifox中创建一个快捷调试直接点击发送,当body中返回下面内容,表示添加成功注意:不需要添加id,他会自......
  • npm学习(六)之如何创建 Node.js 模块
      如何创建Node.js模块Node.js模块是一种可以发布到npm的包。当你创建一个新模块时,创建 package.json 文件是第一步。你可以使用 npminit 命令创建 package.json 文件。命令行中将会提示 package.json 字段中需要你输入的值。名称(name) 和 版本(version) 这......
  • npm学习(十六)之package-lock.json和package.json的作用
      转自:https://www.cnblogs.com/cangqinglang/p/8336754.htmlpackage-lock.json的作用就是锁定安装依赖时包的版本,并且需要上传到git,以保证其他人npminstall时安装的依赖能够保持一致 根据官方文档,这个package-lock.json是在`npminstall`时候生成的一份文件,用以记录......
  • npm学习(十五)之理解npm、nvm、nodejs之间的关系
      nvmnvm:nodeJs版本管理工具,管理nodejs版本和npm版本,使用nvm安装nodejs时会将npm一起安装下来nodejsnodeJs: 一种高效的JavaScript运行环境npmnpm:是随同nodeJs一起安装的包管理工具,npm管理对应nodeJs的第三方插件  常见的使用场景有以下几种:  .允许用户从......