window屬性:onbeforeunload

2018-04-24 10:30 更新

onbeforeunload屬性

WindowEventHandlers.onbeforeunload事件處理程序?qū)傩园诎l(fā)送beforeunload時執(zhí)行的代碼。這個事件在窗口即將到達unload(卸載)其資源時觸發(fā)。該文件仍然可見,并且該事件仍可取消。

注意:為了防止不需要的彈出窗口,一些瀏覽器不會顯示在beforeunload事件處理程序中創(chuàng)建的提示,除非該頁面已與之交互;有些根本不顯示它們。

onbeforeunload屬性語法

window.onbeforeunload = funcRef
  • funcRef是對函數(shù)或函數(shù)表達式的引用。
  • 該函數(shù)應(yīng)該為Event對象的returnValue屬性分配一個字符串值并返回相同的字符串。

onbeforeunload屬性示例

window.onbeforeunload = function(e) {
  var dialogText = 'Dialog text here';
  e.returnValue = dialogText;
  return dialogText;
};

筆記

當(dāng)此事件返回(或?qū)eturnValue屬性設(shè)置為)除null或者undefined之外的值時,系統(tǒng)將提示用戶確認頁面卸載。在某些瀏覽器中,事件的返回值顯示在此對話框中。從Firefox 4,Chrome 51,Opera 38和Safari 9.1開始,將顯示一個不受網(wǎng)頁控制的通用字符串,而不是返回的字符串。

例如:

  • Firefox顯示字符串“此頁面要求您確認您要離開 - 您輸入的數(shù)據(jù)可能無法保存。” 
  • Chrome會顯示字符串“您想離開本網(wǎng)站嗎?您所做的更改可能無法保存”;
  • Internet Explorer不尊重null返回值,并將其作為“null”文本顯示給用戶。您必須使用undefined跳過提示。

自2011年5月25日,調(diào)用到HTML5規(guī)范狀態(tài)的window.alert(),window.confirm()和window.prompt()方法可以在此事件中被忽略。

另請注意,各種瀏覽器忽略事件的結(jié)果,并且根本不要求用戶進行確認。該文件將始終自動卸載。Firefox在about:config中有一個名為dom.disable_beforeunload的開關(guān)來啟用此行為。

你可以并且應(yīng)該通過window.addEventListener()和beforeunload事件來處理此事件。

綁定到此事件可用于防止瀏覽器在JavaScript呈現(xiàn)內(nèi)容的情況下完全緩存頁面。在某些情況下,當(dāng)為了填充內(nèi)容而返回到已執(zhí)行javascript的頁面時,您可能會發(fā)現(xiàn)返回時返回訪問時JavaScript沒有運行。如果window.onbeforeunload已被綁定(并因此在離開該頁面時觸發(fā)),則頁面中的javascript將在隨后的回訪中被觸發(fā)并因此更新內(nèi)容。

規(guī)范

該事件最初由Microsoft在Internet Explorer 4中引入,并在HTML5規(guī)范中進行了標(biāo)準(zhǔn)化。

規(guī)范 狀態(tài) 注釋
HTML Living Standard 
規(guī)范中的'GlobalEventHandlers'的定義。
Living Standard

HTML 5.1 
該規(guī)范中的'GlobalEventHandlers'的定義。
Recommendation

HTML5 
該規(guī)范中的'GlobalEventHandlers'的定義。
Recommendation

瀏覽器兼容性

電腦端 移動端
Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
Androidwebview Chrome for Android
Edge Mobile 適用于Firefox for Android Opera for Android
iOS Safari
基本支持 支持:1 支持是的 支持:1 支持:4 支持:12 支持:3 支持 支持 支持 支持 不支持
已刪除自定義文本支持
支持:51 不支持 支持:44 ? 支持:38 支持:9 支持:51 支持:51 支持 支持:44 支持:38
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號