快捷導(dǎo)航

使用onbeforeunload屬性后的副作用

更新時(shí)間：2007年03月08日 00:00:00 作者：

在使用博客園的編輯器編輯文章時(shí)，有一個(gè)挺體貼用戶的功能，就是如果用戶進(jìn)入編輯器后，不是執(zhí)行"POST"操作而要退出當(dāng)前編輯器頁面，我們會(huì)得到一個(gè)Alert窗口提示（如下圖）。這個(gè)功能其實(shí)很簡(jiǎn)單，就是通過處理window、body或frameset對(duì)象或元素的onbeforeunload事件實(shí)現(xiàn)的。

這個(gè)unbeforeunload的具體用法我就不說了，反正幾乎能引起當(dāng)前頁面發(fā)生跳轉(zhuǎn)的任何動(dòng)作，都會(huì)觸發(fā)這個(gè)事件。并且它先于unload事件被觸發(fā)，如果在其的事件處理函數(shù)里面向event.returnValue屬性賦值非空字符串，就會(huì)出現(xiàn)一個(gè)如上圖的窗口（代碼如下）。

window.onbeforeunload = function ()

{

// . . .

event.returnValue = "You will lose any unsaved content";

// . . .

}

    至于這個(gè)窗口是做什么用的，窗口上系統(tǒng)提示的文字（第1行和第3行）已經(jīng)說的非常清楚了。那么使用這個(gè)事件到底有什么問題呢？

    我們知道引起當(dāng)前頁面發(fā)生條轉(zhuǎn)主要3類事件：
    1、對(duì)瀏覽器窗口的操作，比如關(guān)閉瀏覽器、go home、backward、forward和refresh等；
    2、對(duì)于網(wǎng)頁的Navigatie操作，比如點(diǎn)擊鏈接、在地址欄中執(zhí)行新的地址、頁面表單提交到非當(dāng)前頁面等；
    3、腳本代碼引起的頁面Navigate操作，比如執(zhí)行navigate、locatoin方法(replace, reload, assign)和修改location屬性(href, search)等。

    以上的1-2類操作引起onbeforeunload的事件，使用起來基本沒有任何的問題，可是執(zhí)行第3類頁面條轉(zhuǎn)操作卻有點(diǎn)小問題。就是在上圖的窗口出現(xiàn)后，如果點(diǎn)選"OK"，確實(shí)就OK，頁面正確跳轉(zhuǎn)了?？墒侨绻@個(gè)時(shí)候，我們點(diǎn)選"Cancel"，卻會(huì)出現(xiàn)一個(gè)腳本異常，如下圖：



    解決方法就是把腳本調(diào)用try一下，但這似乎是IE的一個(gè)bug的說。