onbeforeunload - window.onbeforeunload 在 Chrome 中不起作用

Question

这是我使用的代码window.onbeforeunload

<head>
<script>

    window.onbeforeunload = func;
    
    function func() 
    {
        var request = new XMLHttpRequest();
        request.open("POST", "exit.php", true); 
        request.onreadystatechange = stateChanged;
        request.send(null);
    }
    function stateChanged()
    {
        if (request.readyState == 4 || request.readyState == "complete")
            alert("Succes!");
    }
    </script>
</head>

这适用于IE和Mozilla，但不适用于Chrome .....请帮助......提前谢谢......

score 21 · Accepted Answer

在最新版本的 Chrome 中，您似乎唯一可以使用 onbeforeunload 做的事情就是设置警告消息。

window.onbeforeunload = function () {
    return "Are you sure";
};

将工作。函数中的其他代码似乎被 Chrome 忽略了

更新：从 Chrome V51 开始，返回的字符串将被忽略，而是显示默认消息。

score 13 · Accepted Answer

知道我迟到了，但我摸不着头脑，为什么我的自定义 beforeunload 消息在 Chrome 中不起作用并且正在阅读这个。因此，如果其他人也这样做，Chrome 从 51 版开始不再支持 beforeunload 上的自定义消息。显然这是因为该功能已被各种骗局滥用。相反，您会收到一条预定义的 Chrome 消息，该消息可能适合您的目的，也可能不适合您的目的。更多详情请访问：

https://developers.google.com/web/updates/2016/04/chrome-51-deprecations?hl=en#remove-custom-messages-in-onbeforeload-dialogs

个人不认为他们选择的消息是一个很好的消息，因为它提到了离开站点，并且 onbeforeunload 最常见的合法用途之一是用于在 Web 表单上处理/检查脏标志，所以它不是一个很好的措辞用户仍然在您的网站上的时间，只是错误地单击了取消或重新加载按钮。

score 10 · Accepted Answer

你应该试试这个：

window.onbeforeunload = function(e) {
  e.returnValue = 'onbeforeunload';
  return 'onbeforeunload';
};

这适用于最新的 Chrome。我们遇到了同样的问题e.returnValue，onbeforeunload解决了我的问题。

你的代码应该是这样的：

    <head>
    <script>

    window.onbeforeunload = function(e) {
        e.returnValue = 'onbeforeunload';
        func();
        return ''onbeforeunload'';
    };

    function func() 
    {
        var request = new XMLHttpRequest();
        request.open("POST", "exit.php", true); 
        request.onreadystatechange = stateChanged;
        request.send(null);
    }
    function stateChanged()
    {
        if (request.readyState == 4 || request.readyState == "complete")
            alert("Succes!");
    }
    </script>
    </head>

score 4 · Accepted Answer

在 chrome 21.0.1180.79 上确认了此行为

这似乎与 XSS 具有相同的限制，如果您正在刷新页面或在同一域 + 端口上打开页面，则脚本将被执行，否则只有在您返回字符串（或类似内容）和将显示对话框，询问用户他是想靠在页面上还是留在页面上。

这是一件非常愚蠢的事情，因为 onunload/onbeforeunload 不仅用于询问/防止页面更改。

在我的情况下，我也在使用它保存在页面编辑期间所做的一些更改，我不想阻止用户更改页面（至少 chrome 应该尊重返回的 true 或更改页面而不询问返回是否不是字符串)，脚本运行时间限制就足够了。

这在 chrome 中特别烦人，因为在卸载页面时不会将 onblur 事件发送到编辑元素，chrome 只是简单地忽略当前页面并跳转到另一个页面。因此，保存更改的唯一更改是卸载过程，如果用户想要更改它，现在如果没有 STUPID 问题就无法完成......他当然想要，我不想阻止......

希望 chrome 能尽快以更优雅的方式解决这个问题。

score 3 · Accepted Answer

试试这个，它对我有用：

window.onbeforeunload = function(event) {
    event.returnValue = "Write something clever here..";
};

score 1 · Accepted Answer

尝试这个。我已经尝试过了，它有效。有趣，但成功消息不需要像其他消息那样确认。

window.onbeforeunload = function() 
{
    if ( window.XMLHttpRequest )
    {
        console.log("before"); //alert("before");
        var request = new XMLHttpRequest();
        request.open("POST", "exit.php", true); 
        request.onreadystatechange = function () {
            if ( request.readyState == 4 && request.status == 200 )
            {
                console.log("Succes!"); //alert("Succes!");
            }
        };
        request.send();
    }
}

score 1 · Accepted Answer

以上都不适合我。我在卸载前事件函数中从内容脚本-> 后台脚本发送了一条消息。当我在清单中将 persistent 设置为 true 时（实际上您可以完全删除该行），起作用的是：

"background": {
    "scripts": [
        "background.js"
    ],
    "persistent": true
  },

这个 SO question here解释了逻辑。

score 0 · Accepted Answer

我在 MacOS High Sierra 上运行 Chrome 并有一个 Angular 6 项目，我处理 window.beforeunload 和 window.onbeforeunload 事件。你可以这样做，它对我有用：

handleUnload(event) {
  // Chrome
  event.returnValue = true;
}

当我尝试将字符串放入 event.returnValue 时，它显示一个错误，它需要一个布尔值。

score 0 · Accepted Answer

不知道它是否允许自定义消息显示在浏览器上。

<script type="text/javascript">
    window.addEventListener("beforeunload", function(e) {
        e.preventDefault(); // firefox
        e.returnValue = ''; // Chrome
    });
</script>

score 0 · Accepted Answer

当前版本的 Chrome 需要设置事件的returnValue属性。简单地从事件处理程序返回一个字符串不会触发警报。

addEventListener('beforeunload', function(event) {
  event.returnValue = 'You have unsaved changes.';
});

onbeforeunload - window.onbeforeunload 在 Chrome 中不起作用

10 回答 10

Related

Reference