Question

当用户关闭浏览器窗口或刷新页面时，有没有办法运行最终的JavaScript代码？

我正在考虑类似于onload的东西，但更像是onclose？感谢。

我不喜欢onbeforeunload方法，它总是会弹出一个确认框（保留页面/停留在mozilla上）或（重新加载/不重新加载chrome）。有没有办法安静地执行代码？

Answer 1

window.onbeforeunload和window.onunload都有不同的用途，具体取决于浏览器。您可以通过将窗口属性设置为函数或使用.addEventListener：

来为它们提供帮助

window.onbeforeunload = function(){
   // Do something
}
// OR
window.addEventListener("beforeunload", function(e){
   // Do something
}, false);

通常，如果您需要阻止用户离开页面，则使用onbeforeunload（例如，用户正在处理某些未保存的数据，因此他/她应该在离开之前保存）。据我所知， Opera 不支持onunload，但您可以随时设置它们。

Answer 2

好的，我找到了一个有效的解决方案，它包括使用beforeunload事件，然后让处理程序返回null。这将执行所需的代码而不会弹出确认框。它是这样的：

window.onbeforeunload = closingCode;
function closingCode(){
   // do something...
   return null;
}

希望这有帮助。

Answer 3

jQuery版本：

application_helper.rb

更新：jQuery 3：

$(window).unload(function(){
    // Do Something
});

感谢加勒特

Answer 4

有时您可能想让服务器知道用户正在离开页面。例如，这对于清除临时存储在服务器上的未保存图像，将该用户标记为“脱机”或在完成会话时进行记录非常有用。

从历史上看，您将在beforeunload函数中发送AJAX请求，但是这有两个问题。如果发送异步请求，则不能保证该请求将被正确执行。如果您发送同步请求，则它更可靠，但是浏览器将挂起，直到请求完成。如果这是一个缓慢的请求，将给用户带来极大的不便。

幸运的是，我们现在有navigator.sendBeacon()。通过使用sendBeacon()方法，当用户代理有机会将数据异步传输到Web服务器时，不会延迟卸载或影响下一导航的性能。这解决了提交分析数据时遇到的所有问题：数据可靠地发送，异步发送，并且不影响下一页的加载。这是其用法示例：

window.addEventListener("unload", logData, false);

function logData() {
  navigator.sendBeacon("/log.php", analyticsData);
}

sendBeacon()在supported中：

第14边缘
Firefox 31
Chrome 39
Safari 11.1
歌剧26
iOS Safari 11.4

当前不支持：

Internet Explorer
Opera Mini

如果您需要添加对不受支持的浏览器的支持，请使用polyfill for sendBeacon()。如果该方法在浏览器中不可用，它将发送同步AJAX请求。

Answer 5

此处的文档鼓励在窗口上监听onbeforeunload事件和/或添加事件监听器。

window.addEventListener('beforeunload', function(event) {
  //do something here
}, false);

您也可以使用函数或函数引用填充窗口的.onunload或.onbeforeunload属性。

虽然浏览器的行为没有标准化，但该功能可能会返回一个值，浏览器在确认是否离开页面时会显示该值。

Answer 6

您可以使用window.onbeforeunload。

window.onbeforeunload = confirmExit;
function confirmExit(){
    alert("confirm exit is being called");
    return false;
}

Answer 7

该活动名为beforeunload，因此您可以将功能分配给window.onbeforeunload。

Answer 8

在React中尝试一下，如果函数没有执行，请尝试将其包装在IIFE中：


  window.onbeforeunload = (function () {
    alert('GrrrR!!!')
    return null;
  })()

Answer 9

<块引用>

有没有办法安静地执行代码？（无弹窗）

我已经成功地使用了这个，其他方法（例如返回 null 或 false）有问题。已在 ie、Edge、Chrome、Opera 上进行测试。

window.addEventListener('beforeunload', function (e) {
  // the absence of a returnValue property on the event will guarantee the browser unload happens
  delete e['returnValue'];
  // my code that silently runs goes here
});

以上代码是直接从Mozilla.org's onbeforeunload doc

粘贴过来的

更新：这似乎不适用于 IOS Safari :( 所以不是一个完整的解决方案，但也许它仍然可以帮助某人。

Answer 10

您可以尝试这样的事情：

<SCRIPT language="JavaScript">
<!--
function loadOut()
{
window.location="http://www.google.com";
}
//-->
</SCRIPT>

<body onBeforeUnload="loadOut()">

在窗口关闭或页面刷新时运行JavaScript代码？

10 个答案: