js监听离开或刷新页面时的弹窗提示
一、看图
二、使用场景。
填写表单时内容，当离开页面或者刷新的时候回丢失页面的内容，因此人性化的设计该有一个提示。所以这样的功能也就应用而生了。三、思路。
1，页面内容改变。2，离开或刷新浏览器触发事件。四、知识点。
1，如图需要填写内容的地方（即会发生改变的地方）包括input[radio],input[text],select,textarea几种。
2，触发事件选用onchange。
3，离开页面触发的事件选用onbeforeunload。五、上代码了，就这么简单：
$(document).on("change","input,textarea,select",function(){
window.onbeforeunload = function(event) {
return "您编辑的信息尚未保存，您确定要离开吗？"//这里内容不会显示在提示框，为了增加语义化。
};
});六、其他方法
可以保存到一个json里边，然后比较json是否相同，不过这样就比较复杂了。
提供一个demo，感兴趣的同学看一下效果。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var jsonObjA = {
"Name": "MyName",
"Company": "MyCompany",
"Infos": [{
"Age": "100"
},
{
"Box": [{
"Height": "100"
},
{
"Weight": "200"
}
]
}
],
"Address": "弗洛伦萨"
}
var jsonObjB = {
"Name": "MyName",
"Company": "MyCompany",
"Infos": [{
"Age": "100"
},
{
"Box": [{
"Height": "100"
},
{
"Weight": "200"
}
]
}
],
"Address": "达芬奇的故乡"
}
function isObj(object) {
return object && typeof(object) == 'object' && Object.prototype.toString.call(object).toLowerCase() == "[object object]";
}
function isArray(object) {
return object && typeof(object) == 'object' && object.constructor == Array;
}
function getLength(object) {
var count = 0;
for(var i in object) count++;
return count;
}
function Compare(objA, objB) {
if(!isObj(objA) || !isObj(objB)) return false; //判断类型是否正确
if(getLength(objA) != getLength(objB)) return false; //判断长度是否一致
return CompareObj(objA, objB, true); //默认为true
}
function CompareObj(objA, objB, flag) {
for(var key in objA) {
if(!flag) //跳出整个循环
break;
if(!objB.hasOwnProperty(key)) {
flag = false;
break;
}
if(!isArray(objA[key])) { //子级不是数组时,比较属性值
if(objB[key] != objA[key]) {
flag = false;
break;
}
} else {
if(!isArray(objB[key])) {
flag = false;
break;
}
var oA = objA[key],
oB = objB[key];
if(oA.length != oB.length) {
flag = false;
break;
}
for(var k in oA) {
if(!flag) //这里跳出循环是为了不让递归继续
break;
flag = CompareObj(oA[k], oB[k], flag);
}
}
}
return flag;
}
var result = Compare(jsonObjA, jsonObjB);
console.log(result); // true or false
</script>
</body>
</html>七、遇到的问题。
提示框的样式不能改变，个人感觉不太美观，有方法改变的同学一定告诉我哈。js监听离开或刷新页面时的弹窗提示的更多相关文章
- 【js监听报错】页面监听js报错问题
<html> <head> <script type="text/javascript"> // 页面监听js报错问题 onerror=hand ...
- js监听浏览器,关闭,刷新
//浏览器关闭或刷新事件 function bindCloseBrowser() { var a = "注意!!\n您即将离开页面!离开后可能会导致数据丢失\n\n您确定要离开吗?" ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- js离开或刷新页面检测(且兼容FF,IE,Chrome)
<!DOCTYPE html> <html> <head> <script> function closeIt() { return confirm(& ...
- js 监听整个页面的回车事件
JS监听整个页面的回车事件 <script type="text/javascript"> document.onkeydown=keyDownSearch; ...
- js监听页面放大缩小
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>d ...
- js监听输入框值的即时变化onpropertychange、oninput
js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // // 要达到的效果 ...
- js监听input等表单输入框的变化事件oninput
js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...
- 使用web3.js监听以太坊智能合约event
传送门: 柏链项目学院 使用web3.js监听以太坊智能合约event 当我们在前端页面调用合约时发现有些数据不会立即返回,这时还需要再调用更新数据的函数.那么这样的方法使用起来非常不便,监听ev ...
随机推荐
- 浅谈PHP小马免杀
在渗透测试过程初期,上传小马,拿到 webshell 再进行下一步的操作,现如今的网站安全更多是 一些云防护.CDN防护.服务器安全软件等等,给渗透测试.提权等带来了一定难度的提升, 今天探讨一下如何 ...
- BigDecimal进行精确运算
public class Test_1 { public static void main(String[] args) { System.out.println(0.06+0.01); System ...
- tmux的基本用法
tmux的基本用法: tmux #启动 C-b d #挂起,效果如同screen中的C-a d tmux attach #恢复会话,效果如同screen中的screen -r 更多功能(需要在tmux ...
- CentOS 6.5 搭建DNS服务器
1.安装bind yum install -y bind 2.修改named.conf主配置文件 vim /etc/named.conf 图中圈中的地方改为any 3.配置正向.反向解析 vim /e ...
- 深入JVM内核--JVM运行机制
JVM启动流程 JVM基本结构 PC寄存器 每个线程拥有一个PC寄存器 在线程创建时 创建 指向下一条指令的地址 执行本地方法时,PC的值为undefined 方法区 保存装载的类信息 类型的常量池 ...
- tomcat启动不了的问题
tomcat启动的几个问题 1.端口冲突 2.非端口冲突,需要加入配置host文件 日志文件: 解决办法:https://blog.csdn.net/u012949658/article/detail ...
- yum命令不能使用的解决办法
以前yum命令一直是可用的,今天使用它安装命令时一直提示,如下图: 百度了一圈说是网络问题: 然后我就ping www.baidu.com 可以ping通啊 最后在同事的帮助下找到了解决办法: vi ...
- django应用的测试
本文章默认用户使用win10系统,并且已经安装pycharm.git.django2.2.5及配套第三方库(python3.6.0及以上版本,且为anaconda环境) 前言 其实在上一期django ...
- Holer一款局域网服务器代理到公网的内网映射工具
Holer简介 Holer是一个将局域网服务器代理到公网的内网映射工具,支持转发基于TCP协议的报文. 相关链接 开源地址:https://github.com/Wisdom-Projects/hol ...
- 如何设计一个LRU Cache
如何设计一个LRU Cache? Google和百度的面试题都出现了设计一个Cache的题目,什么是Cache,如何设计简单的Cache,通过搜集资料,本文给出个总结. 通常的问题描述可以是这样: Q ...