2. 程式人生 > >javascript如何監聽頁面重新整理和頁面關閉事件

javascript如何監聽頁面重新整理和頁面關閉事件

阿新 • • 發佈：2019-01-14

在我們的日常生活中，時常遇到這麼一種情況，當我們在點選一個連結、關閉頁面、表單提交時等情況，會提示我們是否確認該操作等資訊。

這裡就給大家講講javascript的onbeforeunload()和onunload()兩個事件。

相同點:

兩者都是在對頁面的關閉或重新整理事件作個操作。

不同點：

  1. unbeforeunload（）事件執行的順序在onunload()事件之前發生。(因為，unbeforeunload()是在頁面重新整理之前觸發的事件，而onubload()是在頁面關閉之後才會觸發的)。
  2. unbeforeunload（）事件可以禁止onunload()事件的觸發。
  3. onunload()事件是無法阻止頁面關閉的。
  4. 瀏覽器的相容

  • onunload:

  • IE6，IE7，IE8 中 重新整理頁面、關閉瀏覽器之後、頁面跳轉之後都會執行；

  • IE9 重新整理頁面 會執行，頁面跳轉、關閉瀏覽器不能執行；

  • firefox(包括firefox3.6) 關閉標籤之後、頁面跳轉之後、重新整理頁面之後能執行，但關閉瀏覽器不能執行；

  • Safari 重新整理頁面、頁面跳轉之後會執行，但關閉瀏覽器不能執行；

  • Opera、Chrome 任何情況都不執行。

  • onbeforeunload:

  • IE、Chrome、Safari 完美支援

  • Firefox 不支援文字提醒資訊

  • Opera 不支援

  • IE6,IE7會出現bug

　　

示例程式碼:

onbeforeunload()：

方式一:html元素中新增

複製程式碼 
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 </head>
 7 <body onbeforeunload="return myFunction()">
 8 
 9 <p>該例項演示瞭如何向 body 元素新增 "onbeforeunload" 事件。</p>
10 <p>關閉當前視窗，按下 F5 或點選以下連結觸發 onbeforeunload 事件。</p>
11
 
 <a href="http://www.qqtimezone.top">部落格地址</a>     
12 <script>
13 function myFunction() {
14     return "自定義內容";
15 }
16 </script>
17 
18 </body>
19 </html>
複製程式碼

方式二:javascript中新增

複製程式碼 
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>菜鳥教程(runoob.com)</title>
 6 </head>
 7 <body>
 8 
 9 <p>該例項演示瞭如何使用 HTML DOM 向 body 元素新增 "onbeforeunload" 事件。</p>
10 <p>關閉當前視窗，按下 F5 或點選以下連結觸發 onbeforeunload 事件。</p>
11 <a href="http://www.runoob.com">點選調整到菜鳥教程</a>
12 <script>
13 window.onbeforeunload = function(event) {
14     event.returnValue = "我在這寫點東西...";
15 };
16 </script>
17 
18 </body>
19 </html>
複製程式碼

方式三:新增addEventListener()事件(不過此方法IE8以下不支援)

複製程式碼 
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 </head>
 7 <body>
 8 
 9 <p>該例項演示瞭如何使用 addEventListener() 方法向 body 元素新增 "onbeforeunload" 事件。</p>
10 <p>關閉當前視窗，按下 F5 或點選以下連結觸發 onbeforeunload 事件。</p>
11 <a href="http://www.qqtimezone.top">跳轉地址</a>
12 <script>
13 window.addEventListener("beforeunload", function(event) {
14     event.returnValue = "我在這寫點東西...";
15 });
16 </script>
17 
18 </body>
19 </html>
複製程式碼

onunload():

方式一：html元素中新增

複製程式碼 
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <script type="text/javascript">
 6         function fun() {
 7             // dosomethings
 8         }
 9     </script>
10 </head>
11 <body onunload="fun()">
12 
13 </body>
14 </html>
複製程式碼

方式二：javascript新增

複製程式碼 
 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <title></title>
 6     <script type="text/javascript">
 7     window.onunload = function() {
 8         // dosomethings
 9     };
10     </script>
11 </head>
12 
13 <body>
14 </body>
15 
16 </html>
複製程式碼

相關推薦

javascript監聽頁面重新整理和頁面關閉事件方法詳解

在我們的日常生活中，時常遇到這麼一種情況，當我們在點選一個連結、關閉頁面、表單提交時等情況，會提示我們是否確認該操作等資訊。 這裡就給大家講講javascript的onbeforeunload()和onunload()兩個事件。 相同點: 兩者都是在對頁面的關閉或重新整理事件作個操作。

javascript如何監聽頁面重新整理和頁面關閉事件

在我們的日常生活中，時常遇到這麼一種情況，當我們在點選一個連結、關閉頁面、表單提交時等情況，會提示我們是否確認該操作等資訊。 這裡就給大家講講javascript的onbeforeunload()和onunload()兩個事件。 相同點: 兩者都是在對頁面的關閉或重新整理

安卓實現任意控制元件view可拖拽，並監聽拖拽和點選事件，可自動拉回螢幕邊緣

因為專案中有需要實現控制元件可任意拖拽的需求，所以簡單寫了個自定義OnTouchListener，以作拋磚引玉，歡迎大家提議反饋。 完整實現類如下，程式碼中有詳細註釋： 使用者可以決定是否開啟自動拖拽邊緣功能，可以監聽控制元件的拖拽和點選事件 public cl

android 監聽軟鍵盤在頁面的展開和隱藏

獲取軟鍵盤狀態思路： 獲取當前頁面根佈局及其高度 RootH； 獲取狀態列高度 StatusH和導航欄高度 NavigationH; 獲取當前根檢視在螢幕上顯示的高度RectH； 高度差值比較，（根佈局高度 - 根檢視顯示高度）與（狀態列高度 + 導航欄高度）的大小對

Extjs監聽瀏覽器重新整理、關閉和視窗關閉功能

先上效果圖： 程式碼就如dubug所示： Ext.onReady(function(){ Ext.create('Ext.window.Window',{ title:'監聽測試' , width:400 , height:300 , layout:

用javascript監聽頁面上的所有ajax請求

最近碰到一個很糾結的技術問題。 我們自己是個Grails，集成了另外一個web程式，我們把那個web程式放在我們提供的iframe裡。那個web程式只有在第一次初始化的時候是一個普通的HTTP請求，之後在頁面上的操作，都是通過ajax來操作的。現在我們有個需求，我們需要知道

vue-router ---- 解決頁面重新整理和路由改變時導航條樣式問題

問題:   1.當我們在使用路由時，如果有導航條此時，我們在url位址列目改變路由地址，此時路由內容更改但，導航條樣式沒有隨著改動   2.當頁面重新整理時，url導航位址列的路由和當前頁面顯示的不一致 解決:  1.通過watch監聽路由地址的改變

window.showModalDialog 關閉當前頁面重新整理父頁面

//父頁面函式 function showPort(){ var k = window.showModalDialog("url,"_blank","dialogWidth=500px;dialogHeight=300px;center=yes;location=no"); if(k

微信小程式 監聽手勢滑動切換頁面

1.對應的xml裡寫上手勢開始、滑動、結束的監聽： <view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ><

js監聽瀏覽器重新整理或者關閉 window.onbeforeunload

js監聽瀏覽器重新整理或者關閉 需要jquery.js的支援 <script> window.onbeforeunload = function() { return "您確

Ajax區域性頁面重新整理和history

ajax能實現頁面的無重新整理載入，但是會造成無法前進後退的問題。 我們可以人為的使用history.pushState來人造歷史資訊， 並且通過監聽popstate事件來知道使用者點選了瀏覽器後退或前進按鈕，然後將頁面元素還原到歷史上的某個狀態。 //

畢業設計之android混合模式開發第一天--具有下拉重新整理和頁面載入等待的WebView搭建

第一次真正接觸android的混合模式開發，之前瞭解過如何進行混合模式的開發，常見的是通過WebView元件載入url，使用HTML5和CSS3構建手機端響應式佈局。 今天主要是搭建出一個可載入url，具有下拉重新整理和頁面等待的WebView。 2.頁面等待的實現主要是

html區域性頁面重新整理和跳轉傳參

index.html為父頁面，A.html和B.html為區域性重新整理的子頁面。 頁面跳轉： 如index.html所示，用<iframe>標籤實現頁面的巢狀。 引數傳遞： 當需要傳遞引

js關閉當前頁面重新整理父頁面

一、頁面執行流程說明： 1.點選父頁面a.html的“點我開啟新視窗”按鈕-->彈出新視窗（b.html） 2.關閉彈出的新視窗b.html-->重新整理父頁面a.html 二、實現步驟： 要點：1.給按鈕的點選事件編寫函式f1()，用於彈出新視窗   win

Android 監聽螢幕喚醒和關閉的廣播

1.本部落格為儲存學習和工作過程中個人收穫，博文多轉自網路，所有轉載博文均已標明轉載處連結，如有涉及侵權，請通過[email protected]聯絡博主，博主會即時刪除該侵權博文，根據作者要求會做出相應宣告！ 2.本部落格中的所有博文讀者可自由轉載收藏，本博不保留任何權

監聽HttpSesison產生和銷毀 學習筆記

監聽HttpSesison產生和銷毀 import java.util.Date; import javax.servlet.http.HttpSession; import javax.servlet.http.HttpSessionEvent; import javax.servlet.http.Htt

Nginx監聽相同埠和IP通過域名分發到不同的應用伺服器

1、Nginx配置檔案如下： #user nobody; worker_processes 3; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log inf

監聽reloadData重新整理列表完畢的時機

@(IOS零落的記憶)[runloop, GCD死鎖, 多執行緒] 分析： reloadData是一個非同步方法，並不會等待UITableView或者UICollectionView（後面統稱listView）真正重新整理完畢後才執行後續程式碼，而是立即執行後續程式碼。我們執行reloadData的

學習ASP.NET Core, 怎能不瞭解請求處理管道[3]: 自定義一個伺服器感受一下管道是如何監聽、接收和響應請求的

我們在《伺服器在管道中的“龍頭”地位》中對ASP.NET Core預設提供的具有跨平臺能力的KestrelServer進行了介紹，為了讓讀者朋友們對管道中的伺服器具有更加深刻的認識，接下來我們採用例項演示的形式建立一個自定義的伺服器。這個自定義的伺服器直接利用HttpListener來完成針對請求的監聽、接收

android ViewPager實現App主介面Tab選單頁面切換和點選事件

Tabhost實現頁面滑動切換比較麻煩，這裡介紹一下viewPage 控制元件。 實現了三屏滑動帶標題點選和tab頁面內按鈕的的點選事件實現； viewPage  的優點是可以滑動切換缺點是MainA