Question

当它呈现给我时，这听起来像几乎不可能做的事情。我知道您可以显示一个对话框，以确认何时离开网页。但离开网站时是否可以显示一个对话框？

我无法找到/创建任何可以阅读地址栏并知道您要离开网站的内容。

Answer 1

首先定义哪些事件可以让您的用户远离您的网站？

点击网站内容中的链接
将表格提交给外部行动
来自子窗口的javascript，用于更改其父级
用户在搜索栏（FF和IE）中开始搜索
用户在浏览器地址栏中输入搜索/地址。
用户在访问您的网站时点击后退按钮（或退格键）
用户在他们离开网站之前点击前进按钮（或移位退格），但是通过后退按钮功能返回后来回来
用户关闭浏览器窗口

因此。你能做些什么呢？

这些很容易。检查您的锚点，如果它们指向外部，请在onclick事件
类似于1.为您网站外发布的表单的onsubmit事件添加您的功能。
- ＆GT; 8.确实没有可以控制的适用解决方案。你可以尽可能多地滥用onbeforeunload事件，但是你不会在知道发生了什么事情上取得太大的成功。而且onbeforeunload也有一些限制，所以你的手大部分时间都会受到限制。

真正的问题？

为什么你要控制这个事件，除非困扰你的用户不要离开你。无论如何，乞讨并不会给网络世界带来太多正义。当一些网站让我烦恼时，或者更糟糕的是阻止我离开我不想再回来了。它闻起来糟糕糟糕的可用性，并给出了广告网站的一些暗示。

而非通过向用户提供有价值的内容来尝试让用户感兴趣。

Answer 2

您最好的选择是倾听非标beforeunload事件。几乎所有浏览器都支持这一点，期望Opera能够严格遵守W3C标准。

开球示例：

window.onbeforeunload = function() {
    return "You're leaving the site.";
};

此消息将以确认对话的形式显示。

在您的特定情况下，只要单击导航链接或提交内部表单，您就需要将其关闭（仅设置为null）。您可以通过聆听所需链接的click事件和所需表单的submit事件来完成此操作。 jQuery在这里可能会有很大的帮助：

window.onbeforeunload = function() {
    return "You're leaving the site.";
};
$(document).ready(function() {
    $('a[rel!=ext]').click(function() { window.onbeforeunload = null; });
    $('form').submit(function() { window.onbeforeunload = null; });
});

您只需要为所有外部链接提供事实上的标准属性rel="ext"，即表示这些是外部链接。

<a href="http://google.com" rel="ext">Google</a>

Answer 3

这可能会有所帮助

您需要先检查onclick事件，然后再附上initLocalLinkException();
免责声明：尚未经过测试。

<强> HTML ：

<a href="test.html">internal link</a>
<a href="#test">html anchor</a>
<a href="http://www.google.com">external link</a>
<a href="http://www.google.com" target="_blank">blank external link</a>
<form action="test.html" method="post" >
    <button type="submit">Post Button</button>
</form>

<强>的JavaScript ：

$(document).ready(function () {
  initLocalLinkException();
  window.onbeforeunload = function () { confirmExit() };
  $('form').submit(function () { 
    window.onbeforeunload = null;
  });
});

function initLocalLinkException() {
  $('a').click(function () {
    if ($(this).attr('target') != '_blank') {

      var link = $(this).attr('href');
      if (link.substr(0, 4) == 'http') { 
        var LocalDomains = new Array('http://www.yourdomain.com', 
                                     'https://yourdomain.com', 
                                     'localhost', '127.0.0.1');
        var matchCount = 0;
        $.each(LocalDomains, function () {
          if (this == link.substr(0, this.length)) {
            matchCount++; 
          }
        });
        if (matchCount == '0') { 
          confirmExit(); 
        } else {
          window.onbeforeunload = null;
        }
      } else { window.onbeforeunload = null;  }

    }
  });
}

function confirmExit() {
  alert('Are you sure?'); // Do whatever u want.
}

Answer 4

看看this thread。

实现此目标的一种可能方法是使用Javascript在加载时检查页面上的所有a标记，并检查它们是否链接到外部网站。如果是这样，您可以添加onclick事件以显示确认/警告框或更优雅的内容。当然，使用jQuery将大大简化您必须编写的Javascript，就像在上面的线程中一样。

Answer 5

使用this question中的表达式，您可以执行以下操作：

$.expr[':'].external = function(obj){
    return !obj.href.match(/^mailto\:/) && (obj.hostname != location.hostname);
};
$.expr[':'].internal = function(obj){
    return obj.hostname == location.hostname;
};

$(function() {
    var unloadMessage = function() {
        return "Don't leave me!";
    };

    $('a:internal').click(function() { 
        window.onbeforeunload = null;
    });
    $('form').submit(function() { 
        window.onbeforeunload = null;
    });

    $('a:external').click(function() { 
        window.onbeforeunload = unloadMessage;
    });

    window.onbeforeunload = unloadMessage;
});

Answer 6

这是可能的。只需尝试输入SO的问题或答案，然后在提交之前导航即可。无论您是点击链接还是在地址栏中输入，都会得到“你确定吗？”警报。您可以在SO Meta上发帖询问他们是如何做到的。

Answer 7

如果您将网站设计为单页网页应用，则可以这样做这意味着，加载单个页面，然后使用ajax动态加载其他内容。

在这种情况下，当用户离开页面/网站时会触发onbeforeunload。

离开站点时显示警告，而不仅仅是页面

7 个答案:

真正的问题？