输入页 离开页面前弹出框
离开页面确认主要是利用了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、然后比较两个字符串是否相等。
如果在进行操作但 未保存的情况下 点击顶部其它页面链接，则弹出提示框，
1、点击“确定”进入所点页面并关闭本窗口；
2、点击“取消”或“x”，取消本次跳转操作并关闭本窗口。
不知道别人怎么做，我想出来的算法是：
1、取到form内所有表单的值，
2、把表单键值对转化为hash对象，
3、把hash对像转化为数组，
4、把数组拼接成字符串，
5、然后比较两个字符串是否相等。
/**
* 把表单内容转换为hash对象
* @public
* @param {HTMLElement} form对象
* @return {oHash}
* @author footya | [email protected]
* @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 | [email protected]
* @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">aa</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>