离开网站时弹出

Question

当访问者离开网站询问他们是否真的要离开时，有人要求我弹出一个窗口。 仅当其购物车中有商品时，此弹出窗口才会显示。

我可以轻松地将弹出窗口限制在购物车中有物品的时候，但是我遇到的问题是，即使单击内部链接也可以加载弹出窗口-我怎么拥有它，因此只有在实际离开网站时才会出现。

<script language="JavaScript">
  window.onbeforeunload = confirmExit;
  function confirmExit()
  {
    return "some message about leaving";
  }
</script>

Answer 1

好吧，首先：不要这样做。 请。 对用户而言，这是超级烦人的事情。 只需确保购物车中的商品存储在服务器上或cookie中即可，这样用户就可以随时返回该站点。

看着这个相关问题： 如何在javascript onbeforeunload事件中获取目标URL？ 这不容易做到。

除了使用onbeforeunload ，还可以将点击处理程序附加到显示弹出窗口的网站上的外部链接，或者将点击处理程序附加到检查链接是否为外部的所有链接。

再次，不要这样做...

Answer 2

如果单击链接，它将在e.target.activeElement告诉您。 您可以检查是否存在链接：

window.onbeforeunload = confirmExit;
function confirmExit(e)
{
    var $element = $(e.target.activeElement);
    if ($element.prop("tagName") !== "A") {
        return "some message about leaving";
    }
}

注意：您可以添加其他条件来检查$element.attr("href") ，以确保它显示的消息不是您的站点的链接。

Answer 3

您可以获取单击的链接项的URL，并检查它是否在同一域中。 将其放入if语句中，并放入当前代码。

Answer 4

您必须控制它以启用和禁用行为，如下所示：

<script>
  var beforeunload = function (event) {
    var message = 'some message about leaving';

    (event || window.event).returnValue = message; // Gecko + IE
    return message;                                // Webkit, Safari, Chrome...
  };

  document.addEventListener('click', function(event) {
    if (event.target.tagName === 'A') {
      window.removeEventListener('beforeunload', beforeunload);
    }
  });

  window.addEventListener('beforeunload', beforeunload);
</script>

每当点击页面上的链接时，这将删除beforeunload事件。

Answer 5

一种方式，一种方式，我也不建议您这样做-用户应该可以在不收到警告的情况下离开您的网站-但如果单击了链接，则可以注销该事件：

$('a').click(function() {
    window.onbeforeunload = null;
    return true; // continue
});