实现自定义“beforeunload”对话框的最不显眼的方式是啥？

Posted 2023-05-07

【中文标题】实现自定义“beforeunload”对话框的最不显眼的方式是啥？

【英文标题】：What is the most unobtrusive way to implement a custom 'beforeunload' dialog?实现自定义“beforeunload”对话框的最不显眼的方式是什么？

【发布时间】：2015-05-12 04:53:04

【问题描述】：

我说的是样式化对话框，而不是无法设置样式的默认“beforeunload”对话框。

见脸书：

制作这个最不显眼的方法是什么？最好是我声明一次的脚本，并且神奇地总是有效。

我正在考虑以下几点：

function showCustomDialog()

    [...]


var unfinished = true;

$('a').click(function()

    if ( unfinished )
    
        window.showCustomDialog(  originalUrl: $(this).attr('href')  );
        return false;
    

但我担心这会打破使用<a> 元素触发 JS 行为或 javascript 触发 window.location.href 更改的情况。

有没有更好的、不突兀的方法？

补充说明 - 他们还让它为后退按钮工作。

额外说明 - 显然，当他们无法控制时，他们会退回到默认对话框。

【问题讨论】：

只有 beforeunload() 可以防止意外的后退按钮点击。我同意它看起来会更好，但默认值确实采用了用户的主题并且看起来像他们期望的那样。自定义它会失去可用性和功能。

嗯，好点。我不知道他们如何做到这一点，但他们也有返回按钮工作:)

Brain dump： Facebook 可能会提供/加载与普通网络服务器不同的页面，从而使他们能够完全控制一切。这就是某些元素（例如聊天栏）在加载其余内容时保持持久性的方式。为了自己实现这一点，您可以让所有页面通过 AJAX 自行加载，设置内容，并使用history.replaceState 更新 URL。至于后退按钮，他们可能使用onbeforeunload 来触发上一个请求（面包屑）。

他们可能正在使用 history api 和 onpopstate developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/…

好的，让我的评论变成“只有 beforeunload() 可以防止意外的 home 按钮点击”...

【参考方案1】：

我认为主要问题是，你无法预测 DOM 中的每一个变化，所以你可以像这样轻松地用每个鼠标移动事件（智能手机的触摸事件等）刷新：

$(document).off('mousemove').mousemove(function()
      $('a').off('click').click(function(e)
           e.preventDefault();

           //your dialog goes here

      );
);