window.onbeforeunload方法在IE下無法正常工作的解決辦法

事件的起因是由于在工作中有客戶反映,常常會有用戶在瀏覽網頁的過程中訂購了商品,但是由于用戶一下子打開的窗口過多,又或者在敲打鍵盤時,錯誤地按到了F5鍵 , 導致頁面刷新或者不正常關閉,而這時在該網頁上所做的一切操作的信息都丟失了,如果我們可以提供一個在客戶信息未處理完成時的提示那該多好啊 , 下面的代碼可以做到不管用戶是點擊了關閉,或者是在任務欄關閉、點擊后退、刷新、按F5鍵 , 都可以檢測到用戶即將離開的消息 。
復制代碼 代碼如下:
script type="text/javascript" language="javascript"
function bindunbeforunload()
{
window.onbeforeunload=perforresult;
}
function unbindunbeforunload()
{
window.onbeforeunload=null;
}
function perforresult()
{
return"當前操作未保存,如果你此時離開,所做操作信息將全部丟失 , 是否離開?";
}
/script

只需要將bindunbeforunload()方法注冊到要檢測的頁面上即可,你可以在body的onload或者document.ready中注冊這個方法 , 在這里我們采用的是window.onbeforeunload,即是在頁面即將卸載之前彈出提示框,好的,現在來測試一下,測試代碼:
復制代碼 代碼如下:
html
headtitlethis is id onbeforunload event test/title
/head
script type="text/javascript" language="javascript"
function bindunbeforunload()
{
window.onbeforeunload=perforresult;
}
function unbindunbeforunload()
{
window.onbeforeunload=null;
}
function perforresult()
{
return"當前操作未保存 , 如果你此時離開,所做操作信息將全部丟失,是否離開?";
}
/script
body onload="javascript:return bindunbeforunload();"
h1test is start/h1
input type="button" value="https://www.questions.com.cn/dnjc/綁定事件" id="btnBind" onclick="return biindunbeforunload();"/
input type="button" value="https://www.questions.com.cn/dnjc/刪除綁定事件" id="btnUnBind" onclick="unbiindunbeforunload();"/
/body
/html

上面的代碼就是我此次測試的所有代碼了,現在刷新頁面,嗯,很好,彈出了我們期望中的對話框 。但是當我在IE下打開上述代碼時,我的“刪除事件綁定按鈕”沒有發揮作用,這讓我很崩潰,國內3分之2的用戶都在使用IE,特別是在使用該死的IE6、7,如果我的代碼不能在IE6、7下正常的工作,那相當于我的工作是白做了,當然,獎金的那些事情就更不用想了 。辦法都是人想出來的 , 好吧,我利用一個全局變量來控制是否彈出對話框,修改后的"javascript"代碼如下:
復制代碼 代碼如下:
script type="text/javascript" language="javascript"
var goodexit=false;
function bindunbeforunload()
{
goodexit=false;
window.onbeforeunload=perforresult;
}
function unbindunbeforunload()
{
goodexit=true;
window.onbeforeunload=null;
}
function perforresult()
{
if(!goodexit)
{
return"當前操作未保存,如果你此時離開,所做操作信息將全部丟失,是否離開?";
}
}
/script

同時調用刪除綁定事件時,將變量goodexit的值更改為:true,表示用戶是正常退出,這樣自然不會彈出對話框了 。
再測試一下,正常了 , 對,這就是我想要的結果!
本篇文章源于從Brandon Himes處而得 , 并且還是從google快照,源文鏈接已找不到 , 本來想翻譯的,但是本人水平實在有限,看得懂而已,如果翻譯得不好反而招罵,如果朋友們想看源文,請直接點擊這里,這是快照地址,可能一段時間后就不存在了 。您可能感興趣的文章:onbeforeunload與onunload事件異同點總結判斷用戶的在線狀態 onbeforeunload事件使用onbeforeunload屬性后的副作用關閉瀏覽器時提示onbeforeunload事件

相關經驗推薦