首頁 >web前端 >js教程 >如何針對未儲存的變更改進 OnBeforeUnload 對話框?

如何針對未儲存的變更改進 OnBeforeUnload 對話框?

Barbara Streisand
Barbara Streisand原創
2024-12-15 11:44:18681瀏覽

How Can I Improve the OnBeforeUnload Dialog for Unsaved Changes?

自訂 OnBeforeUnload 對話方塊:綜合解決方案

onbeforeunload 事件是警告使用者未儲存的重要工具離開頁面。但是,此事件顯示的預設對話方塊可能不是最佳的,從而提示需要進行自訂。不幸的是,修改預設對話框是不可行的。

解決方案:在限制範圍內工作

要使用現有對話框,請將字串指派給 window 的 returnValue屬性.event:

window.onbeforeunload = function() {
    return 'You have unsaved changes!';
}

附加說明jQuery

  • 避免在onbeforeunload 中使用jQuery 的事件處理程序,因為它們可能會觸發多個事件。
  • 如果使用jQuery,請使用通用綁定語法:
$(window).bind('beforeunload', function() {} );

自訂訊息Chrome

請注意,自訂訊息Chrome

請注意,自訂訊息Chrome版本51 起,onbeforeunload 對話方塊中的自訂訊息已被棄用。

結論

雖然onbeforeunload 對話框不能這些解決方案是完全客製化的,提供了有效的方法來增強用戶體驗並傳達有關未保存的重要訊息變化。

以上是如何針對未儲存的變更改進 OnBeforeUnload 對話框?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn