研發記錄簿-Paladin: 網頁離開前跳出確認視窗

2008年12月25日星期四

網頁離開前跳出確認視窗

當 USER 點選瀏覽器的關閉視窗 X 時，若要詢問 USER

是否確定要離開，可以透過javascript用以下方法來完成。

window.onbeforeunload

完整範例參考:


<HTML>
<HEAD>
<TITLE> 輕鬆一下 </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--//
window.onbeforeunload = function confirmExit(){
return '有尚未儲存的資料，確定要離開嗎?'; //自訂提示
}
//-->

</SCRIPT>
</HEAD>
<BODY >
<P>本程式在<b>關閉</b>之後，會有一個警示畫面產生。</P>
</BODY>
</HTML>

補充：

在ASP.Net 使用這方法時，因ASPX頁面會存在許多會觸發 post back 的 server control，當其中一個 server control 觸發 post back 之後，依據上面的範例，就會跳出警示畫面。我們只是希望當User點選離開(X)時才跳出警示畫面，而非任何控制項都是如此。所以可以更進一步去改良我們的程式。

confirmExit() 是一個內建函式，如果在函式內加上 return 'OOOOO'; 就會在警示視窗中出現 'OOOOO'的字眼，但如果只是 return ; 則就不會跳出警示視窗。

所以可以透過一個變數來決定是否要觸發警示視窗。如下所示:


<script language="javascript" type="text/javascript">
 var shouldConfirm = true;
 window.onbeforeunload = function confirmExit(){
    if(shouldConfirm)
      return '離開即會放棄基準設定，確定要放棄嗎?'; //自訂提示
    else
      return ;
 }
</script>

如此，假如 ASPX頁面有個控制項叫做 btnSave，我們並不希望壓下 btnSave觸發警示視窗，則可以在btnSave 的 OnClientClick 加上 shouldConfirm=false; ，如此 btnSave 就不會觸發警示視窗。

參考網址：http://www.jikker.net/2008/01/by-jquery.html

4Guys網站進一步的探討:http://www.4guysfromrolla.com/webtech/100604-1.shtml

有條件的觸發警示視窗：http://softwaredevscott.spaces.live.com/blog/cns!1A9E939F7373F3B7!140.entry