当前位置: 代码迷 >> Web前端 >> 论项目_window.onbeforeunload的运用
  详细解决方案

论项目_window.onbeforeunload的运用

热度:95   发布时间:2012-09-14 11:53:44.0
论项目_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;
      }
    }

?

?

?

附:

onunloadonbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过 window.onunload来指定或者在<body>里指定。区别在于onbeforeunloadonunload之前执行,它还可以阻止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--;
			}
		}
	}
}

?

?

?

  相关解决方案