快捷導(dǎo)航

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

更新時間：2010年01月23日 23:44:05 作者：

下面的代碼可以做到不管用戶是點擊了關(guān)閉，或者是在任務(wù)欄關(guān)閉、點擊后退、刷新、按F5鍵，都可以檢測到用戶即將離開的消息。

事件的起因是由于在工作中有客戶反映，常常會有用戶在瀏覽網(wǎng)頁的過程中訂購了商品，但是由于用戶一下子打開的窗口過多，又或者在敲打鍵盤時，錯誤地按到了F5鍵，導(dǎo)致頁面刷新或者不正常關(guān)閉，而這時在該網(wǎng)頁上所做的一切操作的信息都丟失了，如果我們可以提供一個在客戶信息未處理完成時的提示那該多好啊，下面的代碼可以做到不管用戶是點擊了關(guān)閉，或者是在任務(wù)欄關(guān)閉、點擊后退、刷新、按F5鍵，都可以檢測到用戶即將離開的消息。

復(fù)制代碼代碼如下:

 
<script type="text/javascript" language="javascript"> 
function bindunbeforunload() 
{ 
window.onbeforeunload=perforresult; 
} 
function unbindunbeforunload() 
{ 
window.onbeforeunload=null; 
} 
function perforresult() 
{ 
return"當(dāng)前操作未保存，如果你此時離開，所做操作信息將全部丟失，是否離開?"; 
} 
</script> 

只需要將bindunbeforunload()方法注冊到要檢測的頁面上即可，你可以在body的onload或者document.ready中注冊這個方法，在這里我們采用的是window.onbeforeunload，即是在頁面即將卸載之前彈出提示框，好的，現(xiàn)在來測試一下，測試代碼：

復(fù)制代碼代碼如下:

 
<html> 
<head><title>this 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"當(dāng)前操作未保存，如果你此時離開，所做操作信息將全部丟失，是否離開?"; 
} 
</script> 
<body onload="javascript:return bindunbeforunload();"> 
<h1>test is start</h1> 
<input type="button" value="綁定事件" id="btnBind" onclick="return biindunbeforunload();"/> 
<input type="button" value="刪除綁定事件" id="btnUnBind" onclick="unbiindunbeforunload();"/> 
</body> 
</html> 

上面的代碼就是我此次測試的所有代碼了，現(xiàn)在刷新頁面，嗯，很好，彈出了我們期望中的對話框。但是當(dāng)我在IE下打開上述代碼時，我的“刪除事件綁定按鈕”沒有發(fā)揮作用，這讓我很崩潰，國內(nèi)3分之2的用戶都在使用IE，特別是在使用該死的IE6、7，如果我的代碼不能在IE6、7下正常的工作，那相當(dāng)于我的工作是白做了，當(dāng)然，獎金的那些事情就更不用想了。辦法都是人想出來的，好吧，我利用一個全局變量來控制是否彈出對話框，修改后的"javascript"代碼如下：

復(fù)制代碼代碼如下:

 
<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"當(dāng)前操作未保存，如果你此時離開，所做操作信息將全部丟失，是否離開?"; 
} 
} 
</script> 

同時調(diào)用刪除綁定事件時，將變量goodexit的值更改為：true，表示用戶是正常退出，這樣自然不會彈出對話框了。
再測試一下，正常了，對，這就是我想要的結(jié)果！
本篇文章源于從Brandon Himes處而得，并且還是從google快照，源文鏈接已找不到，本來想翻譯的，但是本人水平實在有限，看得懂而已，如果翻譯得不好反而招罵，如果朋友們想看源文，請直接點擊這里，這是快照地址，可能一段時間后就不存在了。

您可能感興趣的文章: