[Javascript]取得使用者關閉IE訊息，並做登出

2009-09-05

56184
0
Javascript

為了不讓使用者在沒有按下[登出]就關閉IE或者按下回上一頁離開系統造成使用者的登入資訊殘留，我們希望能藉由抓到使用者確實離開系統或者按下IE [X]的時候，來清除使用者的登入資訊。

這個功能我想好多人問過了，這邊我來貼一下怎麼做，先講講我們怎麼抓到使用者要離開目前的頁面呢？我們可以透過javascript的beforeonunload跟onunload事件：



function bunload()
{
	mess = "確定離開?";
	return mess;
}

beforeonunload這個事件是視窗卸載(離開/關閉)前的事件，當我們在這邊return一段字串，就會被當成離開的訊息了，以上的例子當我們按下回上一頁時就會跳出這個訊息：

按下OK的話就會回到上一頁，按下Cancel的話就會中止回上一頁的動作，而按下[X]要關閉這個視窗，也會出現同樣的訊息，不過這時候我們發現，當我按下F5時，這個訊息也會跳出耶，怎麼辦？總不能我刷新一下，就要我登出了吧？我們這時候可以這樣做：


window.onbeforeunload = bunload;
function bunload()
{
	if ( isAltF4 )
	{
	    mess = "確定離開?";
	    return mess;
	}
}
	
	
function document.onkeydown(){
	if ((window.event.altKey)&&(window.event.keyCode==115))
	{
 //鍵盤部分如果是按下Alt+F4的話才視為離開
		isAltF4 = true;
		bunload();
	}
}

這時候按下F5發現不會觸發訊息了，不過這時候卻發現，按下[X]時不會有作用，這就是很標準的改A錯了B，真糟糕，要怎麼改呢？我多加了一個判斷event.clientY<0時也要觸發登出的事件，這時候我們再測一下，就發現回上一頁、F5都不會觸發登出事件，而按下[X]跟按下Alt+F4則會觸發關閉視窗與登出的事件囉，如果你要判斷使用者離開現在的頁面，也可以多判斷是否只排除F5的事件：


window.onbeforeunload = bunload;

function bunload()
{
	if (event.clientY < 0 || isAltF4 )
	{
	    mess = "確定離開?";
	    return mess;
	}
}

function document.onkeydown(){
	if ((window.event.altKey)&&(window.event.keyCode==115))
	{
		isAltF4 = true;
		bunload();
	}
}

上面告知我們如何控制頁面卸載的事件，但這些都只是前端的事件，我如何去Server端做登出動作呢？我們可以透過XMLHttp的方式，向後端送出一個request，請他做登出的動作，這邊我是這樣寫的：


//用來判斷是否按下[X]
var isXClose = false;
window.onbeforeunload = bunload;

function bunload()
{
	if (event.clientY < 0 || isAltF4 )
	{
	    mess = "確定離開?";
        //代表是真的按下[X]
        isXClose = true;
	    return mess;
	}
}

function document.onkeydown(){
	if ((window.event.altKey)&&(window.event.keyCode==115))
	{
		isAltF4 = true;
		bunload();
	}
	else
	{
	    isAltF4 = false;
	}
}

//真的關閉時，要觸發logoutUser
window.onunload = logoutUser;
function logoutUser()
{
    //多判斷是不是按下[X]關閉，是的話才做登出
	if (isXClose)
    {
         try
         { 
             var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
             xmlhttp.open("POST","Logout.aspx", false);
             xmlhttp.send(); 
             return true;
         }
         catch(e)
         {
             alert('delete user account error message:' + e.message);
         }
     }
}

多抓onunload事件，並進行登出動作，這邊我用了一個變數isXClose來判斷是否按下[X]，在這邊不使用if (event.clientY < 0 || isAltF4 )來判斷的原因是在這個事件中，抓到的event.clientY已經與bunload中不同了，無法使用這樣的做法，因此我就多做了一道功夫來完成。

這個範例可以work的重點在於beforeonunload事件與onunload這兩個事件的順序與觸發原則，我們在beforeonunload這個事件是視窗卸載前的事件，在這邊可以決定是否觸發onunload的視窗關閉事件，但在onunload的部分則已經無法限制視窗是否關閉，因為它已經開始關閉視窗了。

游舒帆 (gipi)

探索原力Co-founder，曾任TutorABC協理與鼎新電腦總監，並曾獲選兩屆微軟最有價值專家 ( MVP )，離開職場後創辦探索原力，致力於協助青少年培養面對未來的能力。認為教育與組織育才其實息息相關，都是在為未來儲備能量，2018年起成立為期一年的專題課程《職涯躍升的關鍵24堂課》，為培養台灣未來的領袖而努力。

回首頁