如何检测用户何时离开我的站点，而不仅仅是访问不同的页面?

I have a handler for onbeforeunload

我有一个onbeforeunload处理器

window.onbeforeunload = unloadMess;
function unloadMess(){
  var conf = confirm("Wait! Before you go, please share your stories or experiences on the message forum.");
    if(conf){
    window.location.href = "http://www.domain.com/message-forum";
    }
}

but I'm not sure how to know if the url they clicked on the page is within the site.

但是我不知道如何知道他们点击的网址是否在网站内。

I just want them to alert them if they will leave the site.

我只是想让他们知道他们是否会离开网站。

4 个解决方案

#1

It's not possible to do this 100% reliably, but if you detect when the user has clicked on a link on your page, you could use that as a mostly-correct signal. Something like this:

不可能100%可靠地做到这一点，但是如果您检测到用户何时单击了您页面上的链接，您可以将其作为最正确的信号。是这样的:

window.localLinkClicked = false;

$("a").live("click", function() {
    var url = $(this).attr("href");

    // check if the link is relative or to your domain
    if (! /^https?:\/\/./.test(url) || /https?:\/\/yourdomain\.com/.test(url)) {
        window.localLinkClicked = true;
    }
});

window.onbeforeunload = function() {
    if (window.localLinkClicked) {
        // do stuff
    } else {
        // don't
    }
}

#2

I've got one idea, but I don't know if it's work. My suggestion is, add each link an onClick event with a function call. That function reads just the href attribute and store into a variable with global scope.

我有一个想法，但我不知道它是否可行。我的建议是，为每个链接添加一个带有函数调用的onClick事件。该函数只读取href属性并将其存储到具有全局作用域的变量中。

var clickedHrefAttrValue = "";
function getClickUrl(currentLink)
{
   clickedHrefAttrValue = $(currentLink).attr("href");
   return true;
}

The html for the a tags must be looks like following:

a标记的html必须如下所示:

<a href="<url>" onClick="getClickUrl(this)">Linktext</a>

and in your given function:

在给定的函数中

function getClickUrl()
{
   if (clickedHrefAttrValue.indexOf("<your condition>" > -1)
   {
     //what ever you want do to
   }
}

It is just an idea, but I think it is worth to try it.

这只是一个想法，但我认为值得一试。

#3

If you are having issues because your website may have both absolute and relative local links, I have another solution (using jQuery):

如果您有问题，因为您的网站可能有绝对的和相对的本地链接，我有另一个解决方案(使用jQuery):

Demo

演示

/* EXTERNAL LINK WARNING
=========================================*/
$('a').on('click', function(e){
    e.preventDefault();
    var url = $(this).attr('href'),
        host = location.host;       
    if (url.indexOf(host) > -1 || url.indexOf('http','https') == -1){
        /* If we find the host name within the URL,
               OR if we do not find http or https, 
               meaning it is a relative internal link
            */
        window.location.href = url;
    } else {
        var warn = confirm('You\'re leaving the domain.\n\nAre you sure?');
        if(warn == true) {
            window.location.href = url,'_blank';
        } else {
            e.preventDefault;
        }
    }
});

#4

-1

There is a good solution to this which I implemented in my website recently. Just imagine this, everything thats going to be in your website that navigates the user is either going to be a link (anchor tag), button, clickable image or something on these lines. Its definitely not going to be the body element.

我最近在自己的网站上实现了一个很好的解决方案。想象一下，你的网站上所有导航用户的东西要么是链接(锚标签)，要么是按钮，要么是可点击的图片。它肯定不是body元素。

Now what happens when a user leaves the website, he/she can either type in a url and press enter, click a bookmark or press the back/forward buttons.

现在，当用户离开网站时，他/她可以输入url并按回车键，点击书签或按后退/前进键。

When a user does do that, do this:

当用户这样做时，请这样做:

$(window).on('beforeunload', function(e)){
    if(e.target.activeElement.nodeName.toLowerCase() == 'body'){
       yourFunction();
});

What happens is that the body becomes the active element in the target in these cases (when user leaves the website) and this is not the case when the user clicks on internal website navigable elements.

在这些情况下(当用户离开网站时)，body成为目标中的活动元素，而当用户单击内部网站可导航的元素时，情况就不是这样了。

This is a clean, easy solution. Let me know if you face any issues.

这是一个干净、简单的解决方案。如果你有什么问题，请告诉我。

#1