window.Onunload與window.onbeforeunload的區別

轉自:http://baishukui.blog.163.com/blog/static/94018589201211525550142/


Onunload,onbeforeunload都是在刷新或關閉時調用,可以在<script>腳本中通過window.onunload來指定或者在<body>裏指定。
區別在於onbeforeunload在onunload之前執行,它還可以阻止onunload的執行。

  Onbeforeunload也是在頁面刷新或關閉時調用,Onbeforeunload是正要去服務器讀取新的頁面時調用,此時還沒開始讀取;而onunload則已經從服務器上讀到了需要加載的新的頁面,在即將替換掉當前頁面時調用。Onunload是無法阻止頁面的更新和關閉的。而 Onbeforeunload 可以做到。

1、onbeforeunload事件:

  說明:目前三大主流瀏覽器中firefox和IE都支持onbeforeunload事件,opera尚未支持。

  用法:

   ·object.onbeforeunload = handler

   ·<element onbeforeunload = “handler” … ></element>

  描述:

   事件觸發的時候彈出一個有確定和取消的對話框,確定則離開頁面,取消則繼續待在本頁。handler可以設一個返回值作爲該對話框的顯示文本。

  觸發於:

   ·關閉瀏覽器窗口

   ·通過地址欄或收藏夾前往其他頁面的時候

   ·點擊返回,前進,刷新,主頁其中一個的時候

   ·點擊 一個前往其他頁面的url連接的時候

   ·調用以下任意一個事件的時候:click,document write,document open,document close,window close ,window navigate ,window NavigateAndFind,location replace,location reload,form submit.

   ·當用window open打開一個頁面,並把本頁的window的名字傳給要打開的頁面的時候。

   ·重新賦予location.href的值的時候。

   ·通過input type=”submit”按鈕提交一個具有指定action的表單的時候。

  可以用在以下元素:

   ·BODY, FRAMESET, window

  平臺支持:

   IE4+/Win, Mozilla 1.7a+, Netscape 7.2+, Firefox0.9+

  示例:

   <html xmlns=”http://www.w3.org/1999/xhtml“>

   <head>

   <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />

   <title>onbeforeunload測試</title>

   <script>

   function checkLeave(){

    event.returnValue=”確定離開當前頁面嗎?”;

   }

   </script>

   </head>

   <body οnbefοreunlοad=”checkLeave()”>

   </body>

   </html>

2、onunload事件

  用法:

   ·object.onbeforeunload = handler

   ·<element onbeforeunload = “handler”></element>

  描述:

   當用戶關閉一個頁面時觸發 onunload 事件。

  觸發於:

   ·關閉瀏覽器窗口

   ·通過地址欄或收藏夾前往其他頁面的時候

   ·點擊返回,前進,刷新,主頁其中一個的時候

   ·點擊 一個前往其他頁面的url連接的時候

   ·調用以下任意一個事件的時候:click,document write,document open,document close,window close ,window navigate ,window NavigateAndFind,location replace,location reload,form submit.

   ·當用window open打開一個頁面,並把本頁的window的名字傳給要打開的頁面的時候。

   ·重新賦予location.href的值的時候。

   ·通過input type=”submit”按鈕提交一個具有指定action的表單的時候。

  示例:

   <html xmlns=http://www.w3.org/1999/xhtml>

   <head>

   <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />

   <title>onunload測試</title>

   <script>

   function checkLeave(){

    alert(”歡迎下次再來!”);

   }

   </script>

   </head>

   <body οnunlοad=”checkLeave()”>

   </body>

   </html>


發佈了39 篇原創文章 · 獲贊 7 · 訪問量 52萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章