论项目_window.onbeforeunload的运用 _Web前端

论项目_window.onbeforeunload的使用

项目背景：XXXX资金监管系统，为保证房地产开发公司携款潜逃或者不作为，开发商需要交一部分资金到银行由建委来监管这部分资金的使用。

该方法使用之处：在协议申请的时候，开发商要选择单体楼，一个项目下会有很多的单体，每当点击>>或者<<按钮时，页面都会调用Ajax进行保存或者删除选择楼盘的数据。如下图：

当初这样做的原因是：因为是进度过程中的变更，所以懒得动原先写好的代码了，就采用了这么一种方式。采用该种方式会出现两个附加问题就是，第一个问题是在页面上存在两个按钮
,为了保证数据没修改以前的状态，所以如果用户点击“取消”按钮那么之前点击>>操作的数据要还原回去；第二个问题是因为采用弹出窗口，所以当点击右上角的“关闭”按钮时
,数据也得必须恢复以前状态。

以上第一个问题解决如下：

第二个问题解决方法如下：

var req;
//关闭方法
function back(){
                var bldnolist = "";
	for ( var i = 0; i < document.getElementById("supvisionbld").options.length; i++) {
		if (bldnolist == "") {
			bldnolist = document.getElementById("supvisionbld").options[i].value;
		} else {
			bldnolist = bldnolist + ";" + document.getElementById("supvisionbld").options[i].value;
		}
	}
	req = createReq();//该方法创建XHR对象
	var url = "${ctx}/XX/XX.do?method=closeWin";
	if (req) { 
		req.open("post", url, true);//调用open方法
		req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//指定回调函数为callback
		req.onreadystatechange = close_callback;//指定回调函数
		req.send("floorno="+bldnolist+"&state=0&supvisionappno=${obj.supvisionappno }");//发送参数,一般为空
	}
}
//回调函数
function close_callback() {
	if (req.readyState == 4) {
		if (req.status == 200) {
			window.parent.close();
		} else {
		                alert("\u4e0d\u80fd\u5f97\u5230\u63cf\u8ff0\u4fe1\u606f:" + req.statusText);
		}
	}
}

?
?

window.onbeforeunload = function(){
	back();
}

另外本项目还有一个用到onbeforeunload该方法的地方是，退出系统时，直接点击右上角“关闭”按钮时，需要保存用户的退出日志，我也使用了该方法，js代码如下：

window.onbeforeunload = function()
    {
      if (document.body.offsetWidth-50 < event.clientX && event.clientY<0)
      {
        closeStr = "----------------------------------------\n"
                 + "|                                      	|\n"
                 + "|         请按正常方式退出系统              	|\n"
                 + "|                                      	|\n"
                 + "----------------------------------------";
        //在关闭窗口之前执行用户退出的日志保存
     window.onunload = function() {window.location.href = "${ctx}/rbac/index.do?method=logout";} 
        return closeStr;
      }
    }

附：

onunload，onbeforeunload都是在刷新或关闭时调用，可以在<script>脚本中通过 window.onunload来指定或者在<body>里指定。区别在于onbeforeunload在onunload之前执行，它还可以阻止onunload的执行。onbeforeunload也是在页面刷新或关闭时调用，onbeforeunload是正要去服务器读取新的页面时调用，此时还没开始读取；而onunload则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。onunload是无法阻止页面的更新和关闭的，而 onbeforeunload 可以做到。

参考：http://blog.sina.com.cn/s/blog_5f0583ab01010arl.html

《《方法如下：

function btnAdd_onclick() {
	var selRight = document.getElementById("bldnolist");
	var strRole = selRight.value;
	var selLeft = document.getElementById("supvisionbld");
	var bldno = "";//需要更改状态位的楼盘
	if (strRole == "") {
		alert("请选择");
	} else {
		for ( var intI = 0; intI < selRight.length; intI++) {
			if (selRight.options[intI].selected) {
				strRole = selRight.options[intI].value;
				bldno = bldno + strRole + ";";
				var strRoleName = selRight.options[intI].text;
				var objOption1 = document.createElement("<option value='"+strRole+"'>");
				objOption1.text = strRoleName;
				selLeft.options.add(objOption1);
				selRight.options[intI] = null;
				intI--;
			}
		}
	}
}

》》方法如下：?

function btnDelete_onclick() {
	var selRight = document.getElementById("supvisionbld");
	var strRole = selRight.value;
	var selLeft = document.getElementById("bldnolist");
	var bldno = "";//需要更改状态位的楼盘
	if (strRole == "") {
		alert("请选择");
	} else {
		for ( var intI = 0; intI < selRight.length; intI++) {
			if (selRight.options[intI].selected) {
				strRole = selRight.options[intI].value;
				var strRoleName = selRight.options[intI].text;
				bldno = bldno + strRole + ";";
				var objOption1 = document.createElement("<option value='"+strRole+"'>");
				objOption1.text = strRoleName;
				selLeft.options.add(objOption1);
				selRight.options[intI] = null;
				intI--;
			}
		}
	}
}