1. 程式人生 > >onbeforeunload與onunload事件

onbeforeunload與onunload事件

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=""><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><title>onbeforeunload測試</title><script>function checkLeave(){
      event.returnValue
="確定離開當前頁面嗎?";
}
</script></head><body onbeforeunload="checkLeave()"></body></html>

但是onbeforeunload有個小毛病,就是頁面重新整理時,他還是會呼叫到onbeforeunload,為什麼?其實重新整理就相當於關閉了這個IE再重新開啟的意思,因此還是會呼叫到onbeforeunload。

 究竟怎麼解決重新整理不呼叫onbeforeunload呢?

 網上提供很多方法,本人覺得最實用還是以下這段JS

window.onbeforeunload   =   function(){   
      var   n   =   window.event.screenX   -   window.screenLeft;   
      var   b   =   n   >   document.documentElement.scrollWidth-20;   
      if(b   &&   window.event.clientY   <   0   ||   window.event.altKey)   
      {   
          alert("是關閉而非重新整理");   
          window.event.returnValue   =   "是否關閉?";
      }else{
             alert("是重新整理而非關閉");   
     }   
}

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的表單的時候。 

  示例:

<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><title>onunload測試</title><script>  function checkLeave(){
    alert("歡迎下次再來!");
  }
</script></head><body onunload="checkLeave()"></body></html>

相關推薦

關於監控視窗是否關閉的onbeforeunloadonunload事件

Onunload,onbeforeunload都是在重新整理或關閉時呼叫,可以在<script>指令碼中通過 window.onunload來指定或者在<body>裡指定。區別在於onbeforeunload在onunload之前執行,它還可 以阻

onbeforeunloadonunload事件

Onunload,onbeforeunload都是在重新整理或關閉時呼叫,可以在<script>指令碼中通過 window.onunload來指定或者在<body>裡指定。區別在於onbeforeunload在onunload之前執行,它還可 以阻止onunload的執行。   On

獲取頁面離開onbeforeunloadonunload事件的返回值

在各種專案開發的過程中,頁面離開事件onbeforeunload是我們經常要用到的,可以避免使用者操作失誤,給使用者一個選擇的機會,就比如我們常常用到的編輯器中。如果使用者選擇了離開,那麼onunload或者onbeforeunload事件自然會觸發;但若使用者選擇了取消,又該如何檢測呢? 我們假定一個

用js判斷頁面重新整理或關閉的方法(onbeforeunloadonunload事件)

Onunload,onbeforeunload都是在重新整理或關閉時呼叫,可以在<script>指令碼中通過window.onunload來指定或者在<body>裡指定。區別在於onbeforeunload在onunload之前執行,它還可以阻止on

關閉瀏覽器事件 onbeforeunloadonunload

onu 點擊 替換 接口 文字 代碼 com ajax 表單   在做畢設的時候,需要在關閉瀏覽器的時候向後臺服務器修改用戶在線狀態。首先講一下 onbeforeunload 和 onunload(都是在刷新或關閉時調用) 的區別: (1)onbeforeunload:在

JavaScript觸摸手勢事件

media -o id3 tab view 集合 pad chm 訪問 處理Touch事件能讓你跟蹤用戶的每一根手指的位置。你可以綁定以下四種Touch事件: 1.touchstart: // 手指放到屏幕上的時候觸發 2.touchmove: /

總結oninput、onchangeonpropertychange事件的使用方法和差別

mon static 也會 npr listen 綁定 firefox pan tracking 前端頁面開發的非常多情況下都須要實時監聽文本框輸入,比方騰訊微博編寫140字的微博時輸入框hu9i動態顯示還能夠輸入的字數。過去一般都使用onchange/onke

bug-3——onload,onbeforeunloadOnunload的區別

即將 是不是 for load 加載 你是 簡單 onload window window.onload事件設置頁面加載時執行的動作,即進入頁面的時候執行的動作。 window.onunload已經從服務器上讀到了需要加載的新的頁面,在即將替換掉當前頁面時調用 一般用於

js click onclick 事件綁定解綁

賦值 event blog 標簽 style button 代碼 .net element click 與 onclick 1.onclick 事件會在對象被點擊時發生。 <input id="btn1" type="button" onclick="test(

移動端web,tapclick事件

document 解決 取消 list 所有 ons scrip 還要 時間 一、tap與click的區別 兩者都會在點擊時系統自動觸發,但是在手機WEB端,click會有 200~300 ms。延遲來自判斷雙擊和長按,因為只有默認等待時間結束以確定沒有後續動作發生時,才

jquery論callback事件發生並列事件發生的區別

區別 隱藏 ide 發生 click call .com doctype charset 不用callback: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l

a標簽的hrefclick事件

void 跳轉 javascrip 返回 置頂 onclick str script 可能 <a href=‘index.html‘ onclick=‘index()‘ >鏈接</a> a標簽中如果同時存在href和onclick時,以上的寫法,on

關於Application_End Application_Start事件觸發情況的測試(待續)

files mss shc util req 文件 hello ngs reload 測試項目搭建 定義一個簡單的Mvc項目,有如下文件: (1) public class Startup { public void Configuration(IAppBuilde

oninput、onchangeonpropertychange事件的區別

觸發 對象 版權 自動 失去 名稱 右鍵菜單 發生 方案 oninput、onchange與onpropertychange事件的區別 onchange事件只在鍵盤或者鼠標操作改變對象屬性,value的值發生變化且失去焦點時觸發,用戶js改變value時無法觸發; onke

總結oninput、onchangeonpropertychange事件的用法和區別

前端頁面開發的很多情況下都需要實時監聽文字框輸入,比如騰訊微博編寫140字的微博時輸入框hu9i動態顯示還可以輸入的字數。過去一般都使用onchange/onkeyup/onkeypress/onkeydown實現,但是這存在著一些不好的使用者體驗。比如onchange事件只在鍵盤或者滑鼠操作

ready事件load事件的深入理解--

斜體樣式首先看一下window和document的區別 window 1.window物件表示瀏覽器中開啟的視窗。 2.window物件可以省略,如:window.console.log()等價於console.log() document 1.document物件是window物件的一

innerHTMLbutton事件衝突解決辦法

事情描述,我在body裡面寫了如下一個button <body> <input id="btn" type="button" value="自動生成V提高版本"> </body> 然後在js裡面獲取了這個button,然後給它新增點選事件 var b

Vue一個案例引發的動態元件全域性事件繫結總結

最近在自學 Vue 也瞭解了一些基本用法,也記錄了一些筆記有興趣的朋友可以去檢視我的其他文章,技術這東西真的不能光靠看,看是沒有的,你必須要動手實踐,只有在實戰專案中才能發現問題,才能發現我們沒有掌握的知識點,然後發現問題解決問題,我們的能力才能得以提升,要不然就有點眼高手低了。 基於這個想法於是就開始自己

onload事件ready事件的區別,原生jsjquery的區別

onload事件與ready事件分別是原生js與jquery的入口函式 原生js入口函式寫法: window.onload=function(){ } jquery入口函式寫法: $(document).ready(function(){ });   二者的區別主要有:  

[日常]nginx網路事件模型

Nginx 的特點: 1.處理靜態檔案 2.反向代理加速 3.fastCGI,簡單的負載均衡和容錯 4.模組化的結構 5.分階段資源分配技術,使得它的 CPU 與記憶體佔用率非常低,保持 10,000 個沒有活動的連線,它只佔 2.5M 記憶體 6.支援核心 Poll 模型,能經受高負載的考驗,有報告表