10

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

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

4

7 回答 7

16

First off define which events can actually take your user away from your site?

  1. A click of a link inside your web site content
  2. A submit of a form to an outside action
  3. A javascript from a child window that changes window.location on its parent
  4. User starting a search in the search bar (FF and IE)
  5. User entering a search/address in the browser address bar.
  6. User hitting a back button (or backspace) when it just came to your site
  7. User hitting a forward button (or shift-backspace) when they were off the site before but came back by getting there via Back button functionality
  8. User closes the browser window

So. what can you do about all these?

  1. These are easy. Check your anchors and if they do point outside, add some functionality in the onclick event
  2. Similar to 1. Add your functionality for the onsubmit event of the form posting back outside of your site.
  3. -> 8. don't really have an applicable solution that could be controlled. You can abuse onbeforeunload event as much as you want, but you won't have much success of knowing what's going on. And there are certain limitations related to onbeforeunload as well, so your hands will be tied most of the time.

The real question?

Why would you want to control this event anyway except for bothering your users not to leave you. Begging doesn't give much justice in the web world anyway. And when some site would bother me with messages or even worse prevent me from leaving I wouldn't want to get back anymore. It smells of bad bad bad usability and gives a hint of adware site.

Rather try to keep your users interested by providing them with valuable content.

于 2010-03-02T19:36:56.817 回答
14

您最好的选择是收听非标准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>
于 2010-03-02T19:21:26.480 回答
3

This may help

  1. You need to check onclick event before attach initLocalLinkException();
  2. Disclaimer: It's not tested.

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.
}
于 2012-12-20T13:25:10.867 回答
1

看看这个线程。

One possible way to achieve this would be to use Javascript to examine all of the a tags on your page when it loads and check if they are linking to an external site. If so, you can add an onclick event to show a confirm/alert box or something more elegant. Of course, using jQuery will greatly simplify the Javascript you'll have to write, like in the above thread.

于 2010-03-02T19:23:48.157 回答
1

Using the expression from this question, you can do the following:

$.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;
});
于 2010-03-02T19:30:00.233 回答
1

It's possible. Just try entering a question or answer to SO and then navigating away before submitting it. It doesn't matter whether you click on a link or type in the address bar, you get an "Are you sure?" alert. You might post over on SO Meta asking how they do this.

于 2010-03-02T19:37:56.650 回答
1

You can do that if you design your site as a one page web app.
It means, a single page is loaded, then other contents are loaded dynamically using ajax.

In that case the onbeforeunload is triggered when the user leave the page/site.

于 2010-03-02T19:52:59.243 回答