Question

我试图实现一个弹出窗口（引导模式样式），当网页访问者离开我的网站时会触发该窗格。

我尝试了不同的选择：

$(window).bind('beforeunload', function(){
$("#sModal").modal('show');
return 'Take our survey before you leave.';
});

但是，在IE中工作正常时，它在FF中没有用。我还有另一个问题，那就是＆＃34;你想离开还是留下来＃34;当整个页面被加载时，所有浏览器类型上的任何链接上都会显示警报点击我的网站本身。

通过循环遍历我的所有锚标记并添加一个单击侦听器以使用以下命令删除beforeunload侦听器，我解决了这个问题：

window.onload = function () {
    var allLinks = document.getElementsByTagName('a');
    for (var i = 0; i < allLinks.length; i++) {
        allLinks[i].addEventListener("click", removeBeforeUnload, false);
    }
};

removeBeforeUnload函数刚刚使用了

$(window).unbind('beforeunload');

回到实际使popoup / modal出现在所有浏览器上，我在文档完成加载后使用了此stackoverflow答案中的代码：

window.onbeforeunload and window.onunload is not working in Firefox , Safari , Opera?

此解决方案适用于所有浏览器，但现在我无法在本地点击的任何链接上取消绑定此事件！我尝试了一切

window.removeEventlistener('beforeunload',null,false);
window.removeEventlistener('onbeforeunload',null,false);
window.removeBeforeUnload();
window.onbeforeunload = null;

我希望你能指出我正确的方向并解释为什么我无法解开这个事件，我从stackoverflow回答中使用过。谢谢！

Answer 1

一个想法是使用全局变量标志，并且当标志不是真的时，不要在卸载事件处理程序中做任何事情。在链接点击处理程序

中将此标志设置为null或false

然后你真的不需要删除监听器

var doUnload = true;

$('a').click(function(){
   doUnload = false;
});

function unloadhandler(){
    if(doUnload){
       // show modal , return message etc
    }else{
       // do nothing , don't return anything
    }       
}

Answer 2

可能jQuery正在添加第二个beforeunload事件侦听器，您无法通过DOM API删除它，而默认情况下不能通过添加到Window的方法来删除它。

最适合您的是：

var allLinks = $('a');
  for (var i = 0; i < allLinks.length; i++) {
    $(allLinks[i]).on('click', () => {
      $(window).off('beforeunload');
      // now add any custom code you want for handling this event
      $("#sModal").modal('show');
    )};
  }

删除eventunistener for beforeunload

2 个答案: