输入页 离开页面前弹出框

离开页面确认主要是利用了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 ){
         // 添加必要的处理逻辑
     } 
} 

最近在开发中有这样一个需求:
如果在进行操作但 未保存的情况下 点击顶部其它页面链接,则弹出提示框,
大小: 6.06 K
尺寸: 327 x 153
浏览: 4 次
点击打开新窗口浏览全图
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>

你可能感兴趣的:(JavaScript,算法,框架,J#)