2013-05-14 132 views
11

我目前正在检测我的网站用户是否关闭窗口/选项卡或更改网址。关于窗口关闭事件的javascript

我使用的follwoing代码,它完美的作品:

var validNavigation = false; 

function endSession() { 
    // Browser or broswer tab is closed 
    // Do sth here ... 
    alert("bye"); 

} 

function wireUpEvents() { 

    window.onbeforeunload = function() { 
     if (!validNavigation) { 
     endSession(); 
     } 
    } 

    // Attach the event keypress to exclude the F5 refresh 
    $(document).bind('keypress', function(e) { 
    if (e.keyCode == 116){ 
     validNavigation = true; 
    } 
    }); 

    // Attach the event click for all links in the page 
    $("a").bind("click", function() { 
    validNavigation = true; 
    }); 

    // Attach the event submit for all forms in the page 
    $("form").bind("submit", function() { 
    validNavigation = true; 
    }); 

    // Attach the event click for all inputs in the page 
    $("input[type=submit]").bind("click", function() { 
    validNavigation = true; 
    }); 

} 


$(document).ready(function() { 
    wireUpEvents(); 
}); 

我的问题是我想的事件从警报更改为叠加。我已经安装了一个隐藏的div覆盖在上面的代码替换为警报:

$('.overlay').css('display','block'); 

现在这不再起作用,因为是div内没有获得用户停留在页面上。 (用户不必点击警报中的按钮)

关于如何解决这个问题的任何建议?

干杯,丹

+0

你为什么不干脆用'window.onbeforeunload'?我知道这不是一个花哨的'div',但它绝对是用于这些类型的东西。 – Powerslave 2013-05-14 10:40:09

+0

window.onbeforeunload是一个选项,但现在我需要一个花哨的div,需要样式。 – danyo 2013-05-14 10:42:19

+0

复制到http://stackoverflow.com/questions/276660/how-can-i-override-the-onbeforeunload-dialog-and-replace-it-with-my-own/276739 – 2013-05-14 11:38:45

回答

8

窗口关闭事件被触发的最后事件。因此没有其他事件在它之后被解雇。

您可以在jquery中使用beforeunload事件来在屏幕上显示叠加层。

以下链接可以帮助:link

+0

您发布的链接是*非常*有帮助。谢谢! – Ethereal 2013-08-29 19:11:25