输入页离开页面前弹出框-阿里云开发者社区

输入页离开页面前弹出框

2016-05-12 1346

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

离开页面确认主要是利用了onbeforeunload事件，存在着兼容问题当该事件声明为：

   Java代码  
    
  
<body onbeforeunload ="return pageBeforeunload(event);" >  
  
<script type ="text/javascript" >  
function pageBeforeunload(evt){     
     return ' Are you sure you want to leave this page? ' ;  
}  
</script>   

另外一种方式是把onbeforeunload声明为：

   Java代码  
    
<body onbeforeunload="pageBeforeunload(event);">

在该种方式下，将不会弹出系统默认的离开确认对话框，此时可以在pageBeforeunload函数内部，通过调用confirm方法进行确认，这种方式的好处是，即便在用户确认离开页面的时候，也可以进行必要的状态保存操作。此时pageBeforeunload的代码可以写成：

   Java代码  
    
  
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、然后比较两个字符串是否相等。

    Java代码  
     
   
/** 
 * 把表单内容转换为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

     Java代码  
      
    
<!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>  

输入页离开页面前弹出框

热门文章

最新文章

相关电子书

输入页 离开页面前弹出框

热门文章

最新文章

相关电子书

输入页离开页面前弹出框