Question

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

我可以很容易地将弹出窗口限制在购物车有物品的时候，但是我遇到的问题是即使点击内部链接也会加载弹出窗口 - 我怎么能拥有它所以这只会在实际出现时出现离开网站。

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

Answer 1

好吧首先：不要这样做。请。这对用户来说太烦人了。只需确保购物车项目存储在服务器或cookie中，以便用户可以随时返回该站点。

查看这个相关问题：How can i get the destination url in javascript onbeforeunload event?无法轻松完成。

不是使用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

您可以获取已点击的链接项的网址，并检查它是否在同一个域中。将其放在if not语句中，其中包含当前代码。

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
});

离开网站时弹出窗口

5 个答案: