检测浏览器/选项卡关闭

Question

我知道如何在用户尝试离开当前页面时向他们显示警报，询问他们是否确定希望这样做，但我想知道是否有办法仅在窗口/选项卡时显示此警报正在关闭？ 我只想在关闭窗口或选项卡时显示确认信息，而不是在用户单击链接时显示。

Answer 1

不可能。

唯一关闭的是onbeforeunload事件，但关闭的窗口/选项卡或导航到另一个页面之间没有区别（对于 javascript）。

跟进：

我想您可以将点击处理程序附加到页面上的每个锚点并使用“脏”标志，但这真的很黑。 类似于（请原谅我，但为了简单起见使用 jquery）：

(function(){
  var closingWindow = true;
  $('a').on('click', function(){
    if (this.href == /* on-domain link */){
      closingWindow = false;
    }
  });
  $(window).on('beforeunload',function(){
    if (closingWindow){
      // your alert
    }
  });
})();

但这与您将要获得的差不多。 注意：如果另一个 javascript 函数使用window.location等，这将无济于事。

Answer 2

你无法区分这两者。

window.onbeforeunload在浏览器卸载其资源之前立即触发。 你不知道卸载的原因，只知道它即将发生：

来自MDN ：

当窗口即将unload其资源时触发的事件。 文档仍然可见， event is still cancelable 。

Answer 3

做这样的事情怎么样？

1. 将全局变量设置为 false（即var hasCLickedLink = false; ）

2. 在所有链接 ( <a> ) 上，附加一个将变量设置为true的事件处理程序

3. 在onbeforeunload ，检查变量的值以查看链接是否已被单击。 如果它仍然是false ，那么他们还没有点击链接，所以给他们警报。

Answer 4

您需要明确指定不想显示确认对话框的events 。

var validNavigation = 0;

function bindDOMEvents() {
    // Attach the event keypress to exclude the F5 refresh
    $(document).keydown(function(e)
    {
        var key = e.which || e.keyCode;
        if (key == 116)
        {
            validNavigation = 1;
        };
    });
    // Attach the event click for all links in the page
    $("a").bind("click", function()
    {
        validNavigation = 1;
    });
    // Attach the event submit for all forms in the page
    $("form").bind("submit", function()
    {
        validNavigation = 1;
    });
    // Attach the event click for all inputs in the page
    $("input[type=submit]").bind("click", function()
    {
        validNavigation = 1;
    });
};
$(document).ready(function()
{
    bindDOMEvents();
    window.onbeforeunload = function () {
        console.log(validNavigation);
        if (validNavigation == '1')
        {
            console.log("No Alert.. Continue");
        }
        else
        {
            return false;
        }
    };
});

Answer 5

这个解决方案在带有 Violentmonkey 的 Firefox 中对我有用。
它像大多数 window.onbeforeunload 一样使用，并检查是否按下了鼠标左键。 因此，如果按下，这意味着单击可用空间或打开链接 - 而不是关闭选项卡。

    function DetectBrowserExit()
{
  if (butpres == 0)  {
   //your action before closing tab, alert not showing
  }
}

window.onbeforeunload = function(){ DetectBrowserExit(); }

// the key is pressed, then when window.onbeforeunload - link is opening, so, tab not closing 

        document.addEventListener('mousedown',function(e){
            if (e.which == 1) { //1-lbutton 2-mb 3-rb
                //e.preventDefault();
        butpres = 1
        setTimeout(function() {
          butpres = 0 //if after 3 seconds the script still works then the link has not been clicked, clear the click and continue to catch new clicks 

          //alert(butpres);
          }, 3000); //Two seconds will elapse and Code will execute.
         //alert(butpres);
                //command_lock();
            }
        },false);