javascript Onunload與Onbeforeunload使用小結(jié)
更新時間:2009年12月31日 02:34:32 作者:
Onunload,onbeforeunload都是在刷新或關(guān)閉時調(diào)用,可以在<script>腳本中通過window.onunload來指定或者在<body>里指定。區(qū)別在于onbeforeunload在onunload之前執(zhí)行,它還可以阻止onunload的執(zhí)行。
Onbeforeunload也是在頁面刷新或關(guān)閉時調(diào)用,Onbeforeunload是正要去服務器讀取新的頁面時調(diào)用,此時還沒開始讀取;而onunload則已經(jīng)從服務器上讀到了需要加載的新的頁面,在即將替換掉當前頁面時調(diào)用。Onunload是無法阻止頁面的更新和關(guān)閉的。而Onbeforeunload 可以做到。曾經(jīng)做一個考試系統(tǒng),涉及到防止用戶半途退出考試(有意或者無意),代碼如下:
<body onbeforeunload=" checkLeave()">
<script>
function checkLeave(){
event.returnValue="確定放棄考試?(考試作廢,不記錄成績)";
}
</script>
這樣可以讓用戶確認是否要退出考場,其實BLOGJAVA在用戶編寫B(tài)LOG時,如果不保存而跳轉(zhuǎn)到其他頁面,也會有一個確認的提示(防止誤操作),也是用到Onbeforeunload。
另外還可以用來在頁面關(guān)閉的時候關(guān)閉session,代碼如下(注:用window.screenLeft > 10000 來區(qū)分關(guān)閉和刷新操作):
<body onbeforeunload=" closeSession()">
<script>
function closeSession (){
//關(guān)閉(刷新的時候不關(guān)閉Session)
if(window.screenLeft>10000){
//關(guān)閉Session的操作(可以運用AJAX)
}
}
</script>
復制代碼 代碼如下:
<body onbeforeunload=" checkLeave()">
<script>
function checkLeave(){
event.returnValue="確定放棄考試?(考試作廢,不記錄成績)";
}
</script>
這樣可以讓用戶確認是否要退出考場,其實BLOGJAVA在用戶編寫B(tài)LOG時,如果不保存而跳轉(zhuǎn)到其他頁面,也會有一個確認的提示(防止誤操作),也是用到Onbeforeunload。
另外還可以用來在頁面關(guān)閉的時候關(guān)閉session,代碼如下(注:用window.screenLeft > 10000 來區(qū)分關(guān)閉和刷新操作):
復制代碼 代碼如下:
<body onbeforeunload=" closeSession()">
<script>
function closeSession (){
//關(guān)閉(刷新的時候不關(guān)閉Session)
if(window.screenLeft>10000){
//關(guān)閉Session的操作(可以運用AJAX)
}
}
</script>
相關(guān)文章
微信小程序?qū)崿F(xiàn)的點擊按鈕 彈出底部上拉菜單功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的點擊按鈕 彈出底部上拉菜單功能,結(jié)合實例形式分析了action-sheet組件及事件響應簡單使用技巧,需要的朋友可以參考下2018-12-12
uniapp實現(xiàn)全局變量的幾種方式總結(jié)
這里說全局變量,著重指的是能夠全局動態(tài)響應的情況,下面這篇文章主要給大家介紹了關(guān)于uniapp實現(xiàn)全局變量的幾種方式,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10
JavaScript創(chuàng)建類/對象的幾種方式概述及實例
JS中的對象強調(diào)的是一種復合類型,JS中創(chuàng)建對象及對對象的訪問是極其靈活的,下面與大家分享下創(chuàng)建類/對象的幾種方式,感興趣的朋友可以了解下哈2013-05-05
使用Promise封裝小程序wx.request的實現(xiàn)方法
這篇文章主要介紹了使用Promise封裝小程序wx.request的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
Bootstrap與KnockoutJs相結(jié)合實現(xiàn)分頁效果實例詳解
KnockoutJS是一個JavaScript實現(xiàn)的MVVM框架。接下來通過本文給大家介紹Bootstrap與KnockoutJs相結(jié)合實現(xiàn)分頁效果,對bootstrap knockoutjs相關(guān)知識感興趣的朋友一起學習吧2016-05-05

