論項目_window.onbeforeunload的使用
2023-04-12
項目背景：XXXX資金監(jiān)管系統(tǒng)，為保證房地產(chǎn)開發(fā)公司攜款潛逃或者不作為，開發(fā)商需要交一部分資金到銀行由建委來監(jiān)管這部分資金的使用。
該方法使用之處：在協(xié)議申請的時候，開發(fā)商要選擇單體樓，一個項目下會有很多的單體，每當(dāng)點擊>>或者<<按鈕時，頁面都會調(diào)用Ajax進(jìn)行保存或者刪除選擇樓盤的數(shù)據(jù)。如下圖：
當(dāng)初這樣做的原因是：因為是進(jìn)度過程中的變更，所以懶得動原先寫好的代碼了，就采用了這么一種方式。采用該種方式會出現(xiàn)兩個附加問題就是，第一個問題是在頁面上存在兩個按鈕
,為了保證數(shù)據(jù)沒修改以前的狀態(tài)，所以如果用戶點擊“取消”按鈕那么之前點擊>>操作的數(shù)據(jù)要還原回去；第二個問題是因為采用彈出窗口，所以當(dāng)點擊右上角的“關(guān)閉”按鈕時
,數(shù)據(jù)也得必須恢復(fù)以前狀態(tài)。
以上第一個問題解決如下：
第二個問題解決方法如下：
var req;//關(guān)閉方法
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();//該方法創(chuàng)建XHR對象
var url = "${ctx}/XX/XX.do?method=closeWin";
if (req) {
req.open("post", url, true);//調(diào)用open方法
req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//指定回調(diào)函數(shù)為callback
req.onreadystatechange = close_callback;//指定回調(diào)函數(shù)
req.send("floorno="+bldnolist+"&state=0&supvisionappno=${obj.supvisionappno }");//發(fā)送參數(shù),一般為空
}
}
//回調(diào)函數(shù)
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該方法的地方是，退出系統(tǒng)時，直接點擊右上角“關(guān)閉”按鈕時，需要保存用戶的退出日志，我也使用了該方法，js代碼如下：
window.onbeforeunload = function() {
if (document.body.offsetWidth-50 < event.clientX && event.clientY<0)
{
closeStr = "----------------------------------------\n"
+ "| |\n"
+ "| 請按正常方式退出系統(tǒng) |\n"
+ "| |\n"
+ "----------------------------------------";
//在關(guān)閉窗口之前執(zhí)行用戶退出的日志保存
window.onunload = function() {window.location.href = "${ctx}/rbac/index.do?method=logout";}
return closeStr;
}
}附：
onunload，onbeforeunload都是在刷新或關(guān)閉時調(diào)用，可以在