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

110

当用户关闭浏览器窗口或刷新页面时，是否可以运行最终的JavaScript代码？

我在想类似于onload但更像onclose的东西吗？谢谢。

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

javascript browser

— 彼得
source

1

可能重复：stackoverflow.com/questions/805463/...

— 1.44MB

可能重复：stackoverflow.com/questions/1631959/browser-window-close-event

— Horen 2012年

18

等待-这实际上不是重复的...他想知道如何在不提示用户的情况下执行某些操作-所链接的问题提出了相反的要求……

— Phildo

84

同时存在window.onbeforeunload和window.onunload，根据浏览器的使用方式有所不同。您可以通过将窗口属性设置为function或使用以下命令来关联它们.addEventListener：

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

通常，onbeforeunload用于需要停止用户离开页面的情况（例如，用户正在处理一些未保存的数据，因此他/她应在离开之前进行保存）。据我所知，Operaonunload不支持，但是您可以始终设置两者。

— JCOC611
source

这对我有用：Firefox（69.0.2）和Chrome（77.0.3865.90）

— FelipeCaparelli，

51

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

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

希望这可以帮助。

— 彼得
source

10

导航和刷新（F5）时也不会触发此操作吗？如果是这样，它并不能真正解决问题……

— Jago

1

未经测试，但我认为可以return false;做到这一点（即防止默认行为），并且在语义上更正确。

— collimarco 2013年

1

return false仍然会弹出对话框，询问您是否要离开页面。我在锚点上测试了它。使用return null时，对话框没有弹出，但仍显示console.log

— Ricky Stam

20

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

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

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

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

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

sendBeacon()在以下位置受支持：

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

当前不支持它：

IE浏览器
歌剧迷你

如果您需要添加对不受支持的浏览器的支持，这是sendBeacon（）的polyfill。如果该方法在浏览器中不可用，它将发送一个同步AJAX请求。

— 麦克风
source

此问题属于“向服务器发送请求”案例的范围。这样做的想法是能够将每个用户的选项卡保留在打开的选项卡上，并在关闭选项卡时在后端进行清理。

— 彼得

@Peter我出于完整性考虑将其包括在内，但我删除了它。

— 迈克（Mike）

@Mike，请不要删除您的答案。它不仅完成了所选的最佳答案（应该是您的最佳答案），而且还介绍了用于捕获窗口退出或关闭的事件

— Alex8752，19年

@ Alex8752我没有删除答案，而是删除了与问题无关的部分，您可以在此处查看。

— 麦克，

1

@AshokKumar您可以控制发送到服务器的内容。如果要通过GET发送消息，没有什么可以阻止您将请求发送到诸如http://example.com/script.php?token=something&var1=val1&var2=val2将这些值放入GET之类的。

— 麦克，

14

jQuery版本：

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

更新：jQuery 3：

$(window).on("unload", function(e) {
    // Do Something
});

谢谢加勒特

— 帕拉斯
source

8

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

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

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

尽管行为并未在浏览器之间进行标准化，但该函数可能会返回一个值，当确认是否离开页面时浏览器将显示该值。

— 达夫约姆
source

7

您可以使用window.onbeforeunload。

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

— 古尔佩雷特·辛格
source

3

该事件被调用beforeunload，因此您可以将函数分配给window.onbeforeunload。

— Phssthpok
source

-2

您可以尝试如下操作：

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

<body onBeforeUnload="loadOut()">

— 丹恩·巴厘（Dane Balia）
source

23

当心，人们不是在远古时代就读这本书-这是古老的JS和HTML，这里的其他建议要好得多。

— RAnders00 '16