谷歌浏览器扩展中 popup.html 的 onbeforeunload 事件是否触发？答案

【问题标题】：Does onbeforeunload event trigger for popup.html in a google chrome extension?谷歌浏览器扩展中 popup.html 的 onbeforeunload 事件是否触发？
【发布时间】：2010-02-23 03:06:31
【问题描述】：

我正在编写一个带有弹出窗口和背景页面的 google chrome 扩展程序。弹出窗口订阅了后台生成的某些事件，我想在弹出窗口消失时取消订阅这些事件。但是，我没有看到从弹出窗口生成的 onbeforeunload 或 onunload 事件。这些事件被触发了吗？如果没有，关于如何捕获弹出关闭的任何想法？

【问题讨论】：

我有这个确切的问题。你找到答案了吗？

标签： google-chrome google-chrome-extension onbeforeunload

【解决方案1】：

“beforeunload”不会针对浏览器操作弹出窗口触发。相信我，我试过了。然而，“unload”应该被正确触发，所以请注意。

实际上，我有一个类似的系统，它允许您使用 addEventListener 附加事件，并且当 unload 事件触发时它们会自动清理。

这里有个小提示：显然你不能使用console.log，因为当卸载事件触发时，已经太晚了。但是，您可以这样做：

var background = chrome.extension.getBackgroundPage();

addEventListener("unload", function (event) {
    background.console.log(event.type);
}, true);

通过使用上面的代码，你可以打开后台页面的控制台，这应该会显示 unload 事件被正确触发了。

【讨论】：

感谢后台控制台提示！很有用！
@AlexStack 我撤回了您的编辑。 chrome.runtime.getBackgroundPage 不等价 - 它是异步的。
至少有一个事件页面并使用chrome.runtime.getBackgroundPage() 调用后台页面以记录某些内容，我认为unload 事件不起作用。
@jdunning 对于事件页面，你可以尝试使用异步的chrome.runtime.getBackgroundPage函数，但它可能不起作用。
@jdunning 哦，对不起，我猜异步调用完成的速度不够快。因此，您必须继续使用已弃用的旧 chrome.extension.getBackgroundPage() 函数。

【解决方案2】：

我遇到过类似的问题。就我而言，我将焦点设置在弹出页面中的一个元素上。所以当弹出窗口关闭时，元素失去焦点，我可以捕捉到模糊事件。

【讨论】：

这个技巧对我不起作用 - 真的很有希望 - 但没有成功。

【解决方案3】：

如果您已切换到在扩展程序中使用 event pages 而不是背景页面，则推荐的访问它的方法是调用 chrome.runtime.getBackgroundPage() 并使用一个通过背景页面引用回调的函数。

但是，如果您尝试在 onbeforeunload 处理程序中获取背景页面，如下所示：

document.addEventListener("beforeunload", function() {
    chrome.runtime.getBackgroundPage(function(backgroundPage) {
        backgroundPage.log("unloading");
    });
});

在页面卸载之前回调似乎没有触发，因此永远不会调用log()。

在上面的评论中，Pauan 建议使用chrome.extension.getBackgroundPage() 来获取页面。我可以让它工作的唯一方法是不使用addEventListener() 创建处理程序。相反，我不得不去老学校，直接在window上设置处理程序：

window.onbeforeunload = function() {
    chrome.extension.getBackgroundPage().log("unloading");
};

终于到了后台页面。

【讨论】：

【解决方案4】：

使用消息传递 API 在弹出页面和背景页面之间设置一个端口。然后，当弹出窗口消失时，您应该在后台页面中获得一个 onDisconnect 事件。

// popup.js
chrome.runtime.connect({ name: "popup" });
// background.js
chrome.runtime.onConnect.addListener(function (port) {
    if (port.name === "popup") {
        port.onDisconnect.addListener(function () {
        console.log("popup has been closed");
    });
  }
});

【讨论】：