在离开网站时显示警告,而不仅仅是页面。

10

当我听到这个问题时,感觉它几乎不可能实现。我知道在离开网页时可以显示一个对话框进行确认。但是,在离开整个站点时显示对话框是否可行呢?

我一直没有找到/创建任何东西可以读取地址栏并知道您正在离开该站点。


你想确定用户何时导航到站点外的页面或关闭窗口吗? - Justin Johnson
当用户真正离开网站时。我知道在政府网站上,警告会在链接上激活。但是如果您使用地址栏,那么从技术上讲,您知道自己正在离开,因此不需要警告。这就是为什么我不明白他们为什么需要这个的原因。 - tahdhaze09
5
客户有时会要求他们认为需要的东西,但实际上并不需要。这种情况经常发生。 - Justin Johnson
5
我倾向于反驳那个规范。客户常常认为他们应该强制用户以某种方式行事,这通常不是个好主意。如果客户担心用户会错误地离开他们的网站,更好的品牌推广是明智的选择。如果客户试图留住用户,他们需要明白这个“功能”只会激怒用户。 - dnagirl
@dnagirl - 我同意。但由于这是政府内部网站,这意味着用户在这方面没有选择权。不幸的是,我至少必须研究一下这个问题。 - tahdhaze09
7个回答

16

首先确定哪些事件可以使您的用户离开您的网站?

  1. 点击网站内容内部的链接
  2. 提交表单以外部操作
  3. 来自子窗口的Javascript更改其父窗口的window.location
  4. 在搜索栏中启动搜索(FF和IE)
  5. 用户在浏览器地址栏中输入搜索/地址。
  6. 用户按下后退按钮(或退格键),当它刚进入您的网站时
  7. 用户使用前进按钮(或Shift + 后退键)时,如果他们之前离开了该站点,但通过返回按钮功能回到该站点
  8. 用户关闭浏览器窗口

那么,你可以对这些做些什么呢?

  1. 这些很容易。检查您的锚点,如果它们指向外部,请添加一些onclick事件中的功能
  2. 类似于1. 在表单post到站外时,添加您的onsubmit事件的功能。
  3. -> 8. 实际上没有可控的适用解决方案。您可以滥用onbeforeunload事件,但很难知道发生了什么。而且,与onbeforeunload相关的某些限制也存在,所以您大多数时候都束手无策。

真正的问题是什么?

除了让用户不离开您而外,为什么要控制此事件?在网络世界中,乞求并不能给予公正。当某些网站用消息或更糟的是阻止我离开时,我将不再想回来。这闻起来像是一个可怕的可怕的可怕的可用性,并暗示着广告软件网站。

相反,尝试通过提供有价值的内容来保持用户的兴趣


6
在用户体验方面,这种事件确实经常被滥用。但是在某些真实世界的情况下,这个事件被认为是强制性的。例如,在长表格和/或非常机密的网站(即银行)中。 - BalusC
4
这个回答听起来几乎像是骚扰。在用户离开页面之前警告他们有很多好的理由——@BalusC提到了一些。你能回答问题并提供帮助是很好的,但天啊。 - Dave
2
@Dave:很抱歉你觉得我的回答是骚扰,因为我真的不知道你为什么会得出这个结论。确实有理由去实现这个功能,但它们被实现了吗?我见过不止一个银行网站,但没有一个使用这个事件。我的回答更多是为了让OP考虑他们可能遇到的其他界面问题。根据他的其他问题,我相信他不是在开发公共银行网站。不要轻易被冒犯,只是因为一些好的指针给了你重新思考业务流程的建议就将其简单地投下反对票。 - Robert Koritnik
@Dave:好的,没问题。不用担心我会被冒犯到。我只是想向你澄清我的回答(因为你在这里还不太久)。但没关系。当你不同意某个答案有帮助时,你总是有权利进行投票反对。 - Robert Koritnik
1
@Robert - 很高兴我们能够达成不同意见的共识。 :) 顺便说一下 - 看起来 Facebook 在每个编辑信息的页面上都使用了 onbeforeunload。 - Dave
显示剩余4条评论

14

你最好监听非标准的beforeunload事件。这在几乎所有浏览器中都被支持,除了极其严格遵守W3C标准的Opera浏览器。

示例:

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>

这会产生负面影响,如果用户试图通过在地址栏中键入新内容(或在现场键入)来离开。 - GhostToast

3

这可能会有所帮助

  1. 在附加 initLocalLinkException() 之前,需要检查 onclick 事件;
  2. 免责声明:未经测试。

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.
}

1

使用这个问题中的表达式,您可以执行以下操作:

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

1

请看这个帖子

实现这个功能的一种可能的方法是使用JavaScript在页面加载时检查所有a标签,并检查它们是否链接到外部网站。如果是,您可以添加一个onclick事件来显示确认/警报框或更优雅的东西。当然,使用jQuery将大大简化您需要编写的JavaScript代码,就像上面的帖子中所示。


1

这是可能的。只需在SO上输入问题或答案,然后在提交之前导航离开即可。无论您单击链接还是在地址栏中键入,都会出现“您确定吗?”警报。您可以在SO Meta上发布帖子,询问他们如何做到这一点。


1

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

在这种情况下,当用户离开页面/站点时,将触发onbeforeunload事件。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接