關閉視窗前,發出警告訊息:簡介 window.onBeforeUnload 事件

回覆文章
yehlu
Site Admin
文章: 3245
註冊時間: 2004-04-15 17:20:21
來自: CodeCharge Support Engineer

關閉視窗前,發出警告訊息:簡介 window.onBeforeUnload 事件

文章 yehlu »

http://www.codecharge.com.tw/phpBB2/pos ... topic&f=10

以下全文轉貼自:http://blog.roodo.com/jaceju/archives/3117129.html


以下稍微紀錄一下,這是滿好用的功能??????



--------------------------------------------------------------------
簡介 window.onBeforeUnload 事件

在 Gmail 中如果採用另開視窗模式 (另開視窗) 撰寫信件時,在隨意填寫一些文字後按下視窗右上角的關閉按鈕,會先出現以下警告視窗:

您的郵件尚未寄出,
您要捨棄此郵件嗎?

然後按下「取消」後又會出現:

你確定要離開此頁面?
按一下「取消」停留在此頁。
按「確定」繼續,或「取消」以停留在此頁面。

這是利用 onBeforeUnload 事件來完成的,目的在避免使用者操作錯誤時,使得他所輸入的文字付諸流水。

以下是模擬的方式:

<DOCTYPE>
<html>
<head>
<meta>
<title>TEST</title>
</head>
<body>
<script>
window.onbeforeunload = function () {
if (!confirm('您的郵件尚未寄出,\n您要捨棄此郵件嗎?')) {
return '按一下「取消」停留在此頁。';
}
}
</script>
</body>
</html>

目前只有 Firefox 和 IE 支援 onBeforeUnload 事件, Opera 到 9.20 版為止都尚無支援。觸發的時機如下:

* 關閉瀏覽器視窗。
* 通過網址列或書籤 (我的最愛) 導向其他頁面。
* 點選上一頁、下一頁,重新整理,首頁等其中一個功能。
* 點選一個前往其他頁面的 URL 連結。
* 觸發或呼叫以下任意一個事件:
o onclick
o document.write()
o document.open()
o document.close()
o window.close()
o window.navigate()
o window.NavigateAndFind()
o location.replace()
o location.reload()
o form.submit()
* 利用 window.open() 打開一個頁面,並把本頁的 window 的名字傳給要打開的頁面。
* 重新賦予 location.href 的值。
* 透過 input type="submit" 按鈕提交一個具有指定 action 的表單的時候。

註:以上改自陳澤|SurfChen:nbeforeunload 事件。

另外要注意一件事,如果是使用 IE7 ,那麼在按下 Tab 的 x 鍵時,是不會觸發 onBeforeUnload 事件的。
回覆文章

回到「Java Script」