欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

js實現(xiàn)關(guān)閉網(wǎng)頁出現(xiàn)是否離開提示

js實現(xiàn)關(guān)閉網(wǎng)頁出現(xiàn)是否離開提示

網(wǎng)站制作、成都網(wǎng)站制作的開發(fā),更需要了解用戶,從用戶角度來建設(shè)網(wǎng)站,獲得較好的用戶體驗。創(chuàng)新互聯(lián)建站多年互聯(lián)網(wǎng)經(jīng)驗,見的多,溝通容易、能幫助客戶提出的運營建議。作為成都一家網(wǎng)絡(luò)公司,打造的就是網(wǎng)站建設(shè)產(chǎn)品直銷的概念。選擇創(chuàng)新互聯(lián)建站,不只是建站,我們把建站作為產(chǎn)品,不斷的更新、完善,讓每位來訪用戶感受到浩方產(chǎn)品的價值服務(wù)。

大家是否經(jīng)常遇到在關(guān)閉網(wǎng)頁的時候,會看到一個確定是否離開當(dāng)前頁面的提示框?想一些在線測試系統(tǒng)、信息錄入系統(tǒng)等就經(jīng)常會有這一些提示,避免用戶有意或者無意中關(guān)掉了頁面,導(dǎo)致數(shù)據(jù)丟失。這里面的實現(xiàn)過程很簡單,利用了HTML DOM事件中的onunload和onbeforeunload方法。

unload 事件屬性

定義:當(dāng)用戶卸載文檔時執(zhí)行一段 JavaScript,例如:

// body
<body onunload="goodbye()">

//window
window.onbeforeunload=function(e){     
  var e = window.event||e;  
  e.returnValue=("確定離開當(dāng)前頁面嗎?");

用法:當(dāng)用戶離開頁面時,會發(fā)生 unload 事件。注意:如果您重載頁面,也會觸發(fā) unload 事件(以及 onload 事件)。 

觸發(fā)于:

關(guān)閉瀏覽器窗口通過地址欄或收藏夾前往其他頁面的時候點擊返回,前進(jìn),刷新,主頁其中一個的時候點擊 一個前往其他頁面的url連接的時候調(diào)用以下任意一個事件的時候:click,document write,document open,document close,window close ,window navigate ,window NavigateAndFind,location replace,location reload,form submit. 當(dāng)用window open打開一個頁面,并把本頁的window的名字傳給要打開的頁面的時候。重新賦予location.href的值的時候。通過input type="submit"按鈕提交一個具有指定action的表單的時候。 onbeforeunload 事件屬性

定義:在即將離開當(dāng)前頁面(刷新或關(guān)閉)時執(zhí)行 JavaScript,例如:

//body
<body onbeforeunload="goodbye()"> //window
window.onbeforeunload=function(e){     
  var e = window.event||e;  
  e.returnValue=("確定離開當(dāng)前頁面嗎?");

用法:onbeforeunload 事件在即將離開當(dāng)前頁面(刷新或關(guān)閉)時觸發(fā)。該事件可用于彈出對話框,提示用戶是繼續(xù)瀏覽頁面還是離開當(dāng)前頁面。對話框默認(rèn)的提示信息根據(jù)不同的瀏覽器有所不同,標(biāo)準(zhǔn)的信息類似 "確定要離開此頁嗎?"。該信息不能刪除。但你可以自定義一些消息提示與標(biāo)準(zhǔn)信息一起顯示在對話框。注意: 在 Firefox 瀏覽器中,只顯示默認(rèn)提醒信息(不顯示自定義信息)。

觸發(fā)于: 

關(guān)閉瀏覽器窗口  通過地址欄或收藏夾前往其他頁面的時候  點擊返回,前進(jìn),刷新,主頁其中一個的時候  點擊 一個前往其他頁面的url連接的時候  調(diào)用以下任意一個事件的時候:click,document write,document open,document close,window close ,window navigate ,window NavigateAndFind,location replace,location reload,form submit.  當(dāng)用window open打開一個頁面,并把本頁的window的名字傳給要打開的頁面的時候。  重新賦予location.href的值的時候。  通過input type=”submit”按鈕提交一個具有指定action的表單的時候。

 瀏覽器支持程度

目前主流瀏覽器都支持這兩個事件屬性

 js實現(xiàn)關(guān)閉網(wǎng)頁出現(xiàn)是否離開提示

概述

onunload,onbeforeunload都是在刷新或關(guān)閉時調(diào)用,可以在<script>腳本中通過window.onunload來指定或者在<body>里指定。區(qū)別在于onbeforeunload在onunload之前執(zhí)行,它還可以阻止onunload的執(zhí)行。 onbeforeunload也是在頁面刷新或關(guān)閉時調(diào)用,onbeforeunload是正要去服務(wù)器讀取新的頁面時調(diào)用,此時還沒開始讀取;而onunload則已經(jīng)從服務(wù)器上讀到了需要加載的新的頁面,在即將替換掉當(dāng)前頁面時調(diào)用。onunload是無法阻止頁面的更新和關(guān)閉的,而 onbeforeunload 可以做到。

附:

頁面加載時只執(zhí)行onload 

頁面關(guān)閉時先執(zhí)行onbeforeunload,最后onunload 

頁面刷新時先執(zhí)行onbeforeunload,然后onunload,最后onload  

附上部分效果圖:

綁定body標(biāo)簽的代碼:

<!DOCTYPE html>
 <head>
  <meta charset="UTF-8">
  <title>測試</title>
  <script>
    function checkLeave(){
      event.returnValue="確定離開當(dāng)前頁面嗎?";
    }
   </script>
 </head>
 <body onbeforeunload="checkLeave()">
  測試
 </body>
</html>

谷歌瀏覽器下的效果:

點擊刷新按鈕:

js實現(xiàn)關(guān)閉網(wǎng)頁出現(xiàn)是否離開提示

點擊返回按鈕:

js實現(xiàn)關(guān)閉網(wǎng)頁出現(xiàn)是否離開提示

通過任務(wù)欄或者收藏夾前往其他界面:

js實現(xiàn)關(guān)閉網(wǎng)頁出現(xiàn)是否離開提示

關(guān)閉頁面:

js實現(xiàn)關(guān)閉網(wǎng)頁出現(xiàn)是否離開提示

edge下的效果:

點擊刷新按鈕:

js實現(xiàn)關(guān)閉網(wǎng)頁出現(xiàn)是否離開提示

點擊返回按鈕:

js實現(xiàn)關(guān)閉網(wǎng)頁出現(xiàn)是否離開提示

關(guān)閉頁面:

js實現(xiàn)關(guān)閉網(wǎng)頁出現(xiàn)是否離開提示

 注:在新版的火狐瀏覽器(我是用的版本: 57.0 )里面,上面這種寫法不生效?!

綁定window對象的代碼:

<!DOCTYPE html>
 <head>
  <meta charset="UTF-8">
  <title>測試</title>
  <script>
    window.onbeforeunload=function(e){  
     var e = window.event||e; 
     e.returnValue=("確定離開當(dāng)前頁面嗎?");
   } 
   </script>
 </head>
 <body>
  測試
 </body>
</html>

火狐下的效果:

點擊刷新按鈕:

js實現(xiàn)關(guān)閉網(wǎng)頁出現(xiàn)是否離開提示

點擊返回按鈕:

js實現(xiàn)關(guān)閉網(wǎng)頁出現(xiàn)是否離開提示

關(guān)閉頁面:

 js實現(xiàn)關(guān)閉網(wǎng)頁出現(xiàn)是否離開提示

注:這種方法在谷歌瀏覽、edge瀏覽器下仍適用,效果與第一種一樣!

分享文章:js實現(xiàn)關(guān)閉網(wǎng)頁出現(xiàn)是否離開提示
網(wǎng)址分享:http://www.chinadenli.net/article46/pecgeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站建設(shè)手機(jī)網(wǎng)站建設(shè)網(wǎng)站策劃標(biāo)簽優(yōu)化軟件開發(fā)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名