我怎么能推翻onbeforeunload对话框并取代它与我的自定义代码?

阅读时长 4 分钟读完

在前端开发中,我们经常需要捕获用户关闭页面的事件,并执行一些清理工作。通常情况下,我们使用 onbeforeunload 事件来实现这个功能。但是,由于浏览器对这个事件的限制,它可能会弹出一个默认的对话框,询问用户是否要离开页面。在某些情况下,我们可能希望自定义这个对话框或者完全替换掉它。

onbeforeunload 的问题

首先,让我们看一下 onbeforeunload 的问题。该事件是在文档即将卸载时触发的,可以用来检查页面是否有未保存的更改、提示用户正在离开等操作。但是,当我们尝试通过 JavaScript 改变页面内容时,浏览器会弹出一个确认框,询问用户是否真的要离开页面。这个对话框不仅令人困扰,而且无法自定义样式和内容。

自定义对话框

如果你想自定义 onbeforeunload 事件弹出的对话框,你可以使用 window.onbeforeunload 属性来覆盖默认的对话框。但是,这个属性只能设置一个字符串作为对话框的内容,并且不能添加自定义样式或交互。

要实现更高度的自定义,我们需要使用 window.addEventListener 方法监听 beforeunload 事件,然后手动弹出一个自己定义的对话框。

-- -------------------- ---- -------
--------------------------------------- ----------- -
  ------------------- -- ------

  ----- ------------------- - --- --- ------ ---- -- ----- --- ------- -- -------
  ------------- - -------------------- -- -------

  ----- ----- - ------------------------------
  --------------- - --------------- -- ------
  --------------- - -
    ---- ---------------------
      ----------------------
    ------
    ---- -------------------
      ------- --------------------------------------
      ------- --------------------------------
    ------
  --

  ----- -------- - ----------------------------------

  ---------------------------------- ---------- -
    ------------------------------------------ ---------------------
    ------------- - -----------------------------------
  ---

  ----- ----------- - -------------------------------------

  ------------------------------------- ---------- -
    ---------------
  ---

  ---------------------------------

  ------ --------------------
---

如上代码所示,我们首先取消了默认的确认框弹窗,然后创建了一个自定义的对话框。这个对话框有两个按钮,一个是继续浏览按钮,另一个是离开页面按钮。当用户点击离开页面按钮时,我们需要先删除 beforeunload 事件的监听器,然后再跳转到目标页面。

完全替换掉默认的对话框

如果你想完全替换掉默认的 onbeforeunload 对话框,你可以使用 addEventListener 方法,在 unload 事件中执行一些清理工作,并且不返回任何值。在该方法中,你可以执行一些异步操作,例如向服务器发送请求或者保存数据,以确保在页面卸载之前完成所有必要的工作。

需要注意的是,由于该事件没有默认行为,因此它不会弹出确认框。但是

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/8499

纠错
反馈