在卸载事件

Question

窗口的onbeforeunload属性可以设置为一个函数，该函数返回在对话框中向用户显示的字符串，以确认用户想要离开。这旨在防止用户在导航期间丢失数据。不幸的是，它经常被用来欺骗用户。

从Chrome 51开始，将不再向用户显示自定义字符串。 Chrome仍然会显示一个对话框，以防止用户丢失数据，但其内容将由浏览器而不是网页设置。

通过此更改，Chrome将与Safari 9.1及更高版本以及Firefox 4及更高版本保持一致。

window.addEventListener("beforeunload", function (e) {
    var confirmationMessage = 'Please Save or Submit changes before moving away from this page';
    confirmationMessage += 'If you leave before saving, your changes will be lost.';

    (e || window.event).returnValue = confirmationMessage; //Gecko + IE
    return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.       
});

是否有解决方法可以在beforeunload事件之前传递自定义消息？

Answer 1

不，没有。如果有，它宁可打败浏览器供应商所做的改变的目的，嗯？

Answer 2

在某些浏览器中可能会有部分解决方法。您无法更改对话框，但可以在对话框出现之前尝试更改页面内容，以显示用户将看到的大胆的消息。

这是一个简单的例子，它可以在Firefox中运行，但不适用于Chrome：

window.addEventListener('beforeunload', function(event) {
  document.body.textContent = "If you click leave you'll lose your data!";
  document.body.style.paddingTop = '40px';
  document.body.style.fontSize = '60px';
  document.body.style.fontWeight = 'bold';
  return event.returnValue = 'warning';
});

<a href="https://stackoverflow.com">a link to somewhere else</a>

您可以看到浏览器使页面内容变暗，因此消息不是很突出。