论项目_window.onbeforeunload的使用

2023-04-12

项目背景：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都是在刷新或关闭时调用，可以在