javascript location.href onchange 事件监听器？

Question

我想在您离开页面时显示一条消息（不是烦人的警报，只是一些 html 告诉您等待），在考虑它时我面临一些困难：

• 当用户在 浏览器，取消导航 操作，我想发送消息 离开。

• 无论何时单击任何链接，都会显示该消息。

• 当点击的链接刚刚打开另一个选项卡时不应捕获（忽略 _blank 目标）

话虽如此，触发事件非常简单，就像

$(document).unload(function()
{
    // display message
});

问题是如果用户取消，消息不会消失。

一个可能的解决办法是：

$(window).unload(function()
{
    // display message

    setTimeout(function()
    {
        // hide message
    },5000);
});

但我想知道是否有更简洁的方法，即当用户取消导航（或由于任何其他原因失败）时，我可以隐藏消息。

编辑#2：

我刚刚注意到，使用上面的代码，在 FF 中，直到页面离开时才会显示消息，此时如果用户按下停止，他将收到 about:blank。如果他在此之前按停止，则永远不会显示该消息。这正是我想要的。

在 Internet Explorer 中，消息永远不会显示，我假设这是因为 IE 处理内容的方式不同。我想知道 chrome 会发生什么？

Answer 1

关于第一点：

当用户在浏览器中按下停止，取消导航离开操作时，我希望消息消失。

不久前我收到了the same question，而我随后的研究也支持了我的响亮回应，那就是这是不可能的。一旦您开始请求新页面，就不可能以编程方式可靠地“返回”它。超时可能确实是唯一的方法。

不过，另外两点应该相对简单：遍历每个链接（例如使用 jQuery），并添加一个打开确认窗口的 click 事件，并返回 false 以便原始 href 不是t 打开。仅对内部链接执行此操作也应该相对容易（检查target 属性，如果是_blank，请不要理会链接。）

但是，处理已经有click 事件的链接以及其他导致不同页面的事件（如表单提交）可能会变得困难。

Answer 2

这是一个适用于所有浏览器的解决方案。它使用document.readyState 属性，该属性适用于所有浏览器，除了早期版本的 FireFox（适用于版本 3.6.8）。如果浏览器支持readyState 属性，它将检查readyState 是否已加载（浏览器将转到另一个页面）或已完成（或其他指示页面未转到任何地方的其他内容）。如果浏览器不支持 readyState，那么它将默认为您的解决方案。

(function(){
    var hideMessage=document.readyState?function(){
        setTimeout(function(){
            if(document.readyState=='loading'){
                hideMessage();
            }else{
                //hide message
            }
        },500);
    }:function(){
        // hide message
    }
    function displayMessage(){
        // display message
    }
    window.onbeforeunload=function(){
        displayMessage();
        setTimeout(hideMessage,document.readyState?10:5000);
    };
}());