离开页面确认主要是利用了onbeforeunload事件，存 在着兼容问题 当该事件声明为 ：
<body onbeforeunload ="return pageBeforeunload(event);" >
<script type ="text/javascript" >
function pageBeforeunload(evt){
return ' Are you sure you want to leave this page? ' ;
}
</script>
另外一种方式是把onbeforeunload声明为：
<body onbeforeunload="pageBeforeunload(event);">
在该种方式下，将不会弹出系统默认的离开确认对话框 ，此时可以在pageBeforeunload函数内部，通过调用confirm方法进行确认，这种方式的好处是，即便在用户确认离开页面的时候，也可以进行必要的状态保存操作。此时pageBeforeunload的代码可以写成：
function pageBeforeunload(evt){
var confirm = window.confirm(' Are you sure to leave this page?');
if (confirm == true ){
// 添加必要的处理逻辑
}
}
如果在进行操作但未保存的情况下 点击顶部其它页面链接，则弹出提示框，
1、点击“确定”进入所点页面并关闭本窗口；
2、点击“取消”或“x”，取消本次跳转操作并关闭本窗口。
不知道别人怎么做，我想出来的算法是：
1、取到form内所有表单的值，
2、把表单键值对转化为hash对象，
3、把hash对像转化为数组，
4、把数组拼接成字符串，
5、然后比较两个字符串是否相等。
2、点击“取消”或“x”，取消本次跳转操作并关闭本窗口。
不知道别人怎么做，我想出来的算法是：
1、取到form内所有表单的值，
2、把表单键值对转化为hash对象，
3、把hash对像转化为数组，
4、把数组拼接成字符串，
5、然后比较两个字符串是否相等。
/**
* 把表单内容转换为hash对象
* @public
* @param {HTMLElement} form对象
* @return {oHash}
* @author footya | yongsheng2@staff.sina.com.cn
* @update 2009-8-10 修改自alz框架
* @example
* formToHash(document.forms[0]);
*/
function formToHash(form) {
var oHash = {};
var el;
for (var i = 0, len = form.elements.length; i < len; i++) {
el = form.elements[i];
if (el.name == "") continue;
if (el.disabled) continue;
switch (el.tagName.toLowerCase()) {
case "fieldset":
break;
case "input":
switch (el.type) {
case "radio":
if (el.checked)
oHash[el.name] = el.value;
break;
case "checkbox":
if (el.checked) {
if (!oHash[el.name])
oHash[el.name] = [el.value];
else
oHash[el.name].push(el.value);
}
break;
case "button":
break;
case "image":
break;
default:
oHash[el.name] = el.value;
break;
}
break;
case "select":
if (el.multiple) {
//alert(el.name);
for (var j = 0, lens = el.options.length; j < lens; j++) {
if (el.options[j].selected) {
if (!oHash[el.name])
oHash[el.name] = [el.options[j].value];
else
oHash[el.name].push(el.options[j].value);
}
}
} else {
oHash[el.name] = el.value;
}
break;
default:
oHash[el.name] = el.value;
break;
}
}
el = null;
return oHash;
}
/**
* 把含有表单数据的hash对象转化为数组
* @public
* @param {obj} hash对象
* @return {Array}
* @author footya | yongsheng2@staff.sina.com.cn
* @update 2009-8-10 修改自alz框架
* @example
* var aData = formHashToArray(hash);
*/
function formHashToArray(hash) {
var a = [];
for (var k in hash) {
if (typeof(hash[k]) == "string") {
a.push(k + "=" + encodeURIComponent(hash[k]));
}
else {
for (var i = 0, len = hash[k].length; i < len; i++) {
a.push(k + "=" + encodeURIComponent(hash[k][i]));
}
}
}
return a;
}
调用这两个方法来实现字符串对比,submit不触发onbeforeunload
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='zh-CN' xml:lang='zh-CN' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<form name="test">
<input type="text" name="pic"/>
<a href="http://www.baidu.com">其他链接</a>
<input type="radio" name="radio" value="1"/>
<input type="submit" onclick="filter = false;" value="提交"/>
<a href="#" onclick="filter = false;document.test.submit();">链接提交</a>
</form>
<script>
var FILTERFORM = document.test;
var FormHashin = formToHash(FILTERFORM);//记录表单的初始状态
var filter = true; //临时设false不弹框
/***change window***/
function outWrite(e){
var event = window.event||e;
event.returnValue = "您修改的设置尚未保存，确定要离开吗？";
}
window.onbeforeunload = function(e){//卸载页面时再获取一次表单状态,监听
var FormHashout = formToHash(FILTERFORM);
if(!compareHash(FormHashin, FormHashout)&&filter){
try{outWrite(e)}catch(exp){};
}
};
//比较两个hash对象是否相等。
function compareHash(hash1,hash2){
var h1 = formHashToArray(hash1).join("-");
var h2 = formHashToArray(hash2).join("-");
if(h1 == h2){
return true;
}else{
return false;
}
}
</script>
<html>
相关推荐
在IT行业中，弹出框是一种常见的用户界面元素，它用于向用户提供信息、确认操作或接收用户的输入。在本文中，我们将深入探讨“模拟弹出框”这一主题，它旨在为用户提供更加美观且功能丰富的交互体验。 模拟弹出框...
在JavaScript编程中，弹出框通常用于向用户展示警告、确认信息或收集用户输入。"js弹出框弹出层"是指使用JavaScript实现的一种非模态或者模态的对话框，它可以在页面上创建一个独立的窗口，用来显示内容、进行交互。...
在用户交互设计中，弹出框（Popup）被广泛用于实现这种功能，特别是在移动端和Web应用上，以提供更友好的用户体验。"登录注册弹出框以及弹出框校验"这个话题涉及到用户界面设计、前端开发和数据验证等多个方面。 ...
jQuery弹出框通常被称为对话框或模态窗口，它们在网页中用于显示警告、确认信息、输入数据或展示详细内容。这些弹出框可以在不离开当前页面的情况下提供额外的信息或功能，从而提高用户体验。以下是一些关键的jQuery...
在IT行业中，"弹出框代码"通常指的是在用户界面（UI）中用于显示警告、确认、输入或其他交互信息的小窗口。弹出框是应用程序与用户进行交互的一种常见方式，它们可以打断用户的常规操作，引导用户进行特定的选择或...
通过深入分析"WebSite2"项目，我们可以学习到如何与服务器进行异步通信，如何处理用户点击事件，以及如何在不离开当前页面的情况下显示弹出框。此外，还可以了解到如何结合CSS和JavaScript来定制弹出框的外观和行为...
在网页设计中，弹出框是一种常见的交互元素，它们可以在不离开当前页面的情况下显示额外的信息或接收用户的输入。jQuery弹出框插件可以替代浏览器自带的alert()、confirm()和prompt()函数，提供更美观且功能更强大的...
在Web开发中，弹出框是一种常见的交互方式，用于显示额外的信息或者收集用户的输入。本文将详细讲解一种利用JavaScript和ASP.NET来实现弹出框的方法。 #### 弹出框的基本概念 弹出框通常指的是在用户执行某个操作...
弹出框通常用于显示警告信息、确认对话框或展示详细内容，而不会离开当前页面。在jQuery中，我们可以使用多种方法创建弹出框，如`alert()`、`confirm()`和`prompt()`，但这些是JavaScript原生方法，不是jQuery特有的...
"漂亮的登录页+滑动弹出框+js正则验证"这个项目，显然着重于实现这三个核心功能，以创建一个既视觉上吸引人又具有实用性的用户界面。 首先，我们来详细探讨“漂亮的登录页”。这通常涉及到以下几个方面： 1. **...
在Google的检索中，当你输入查询并点击搜索时，可能会看到一个下拉框，显示出与你输入相关的建议搜索词，这就是一种AJAX弹出框的典型应用。用户可以不离开当前页面就获取即时反馈，提升了用户体验。 要将PHP代码...
在网页开发中，实现"点击登录弹出登录框"的效果是一种常见的用户交互设计，它可以提供良好的用户体验，使得用户无需离开当前页面即可完成登录操作。这个效果通常涉及到JavaScript和Ajax技术的运用。 首先，我们来...
在网页设计和开发中，页面弹出层和提示框是不可或缺的交互元素，它们用于向用户传达信息、警告、确认操作或请求输入。本篇将深入探讨这些知识点，旨在帮助开发者更好地理解和应用。 首先，我们要了解什么是“弹出层...
首先，浏览器弹出框是网页中常见的一种交互元素，通常用于警告、确认或者获取用户输入。例如，弹出框可能会询问用户是否保存未保存的更改，或者在用户尝试离开页面时进行提示。然而，浏览器默认的弹出框样式和功能...
根据给定的信息，我们可以深入探讨一下“网页弹出确认信息后转向代码”这一主题，以及如何在实际开发中有效利用这段代码。 ### 知识点一：JavaScript 的 `confirm()` 函数 `confirm()` 是 JavaScript 提供的一个...
**标题：“dialog弹出框”** 在Web开发中，对话框（Dialog）是一种常见的用户界面元素，用于在页面上提供额外的信息或者与用户交互。它通常以弹出窗口的形式出现，可以包含各种输入、按钮、文本等组件。对话框允许...
在模拟弹出选择框的场景中，jQuery可以帮助开发者更方便地控制页面元素的显示和隐藏，实现动态效果，比如淡入淡出、滑动等，同时，它还提供了便捷的事件绑定机制，使得用户点击或交互时能够触发相应的弹出框。...
6. **美化弹出层**：使用CSS对弹出层进行样式调整，如添加阴影、边框、动画效果等，使其更像一个弹出框。 在示例文件`ShowDiv`中，可能包含了一个展示如何实现这个功能的完整示例，包括HTML结构、服务器端代码和...
在创建登录框效果时，我们通常会有一个隐藏的登录表单，当用户点击登录按钮时，这个表单会以弹出框的形式显示出来。这涉及到CSS的`display`属性，我们可以初始设置登录框的`display`为`none`，使其默认不显示。然后...
在本教程中，我们将探讨如何使用 jQuery 实现弹出框，也就是模态框，来实现对表格数据的增删查改功能。 首先，模态框在用户界面设计中是一种常见元素，它允许用户在不离开当前页面的情况下进行交互。这种弹出式的...