javascript 如何检测用户何时离开我的网站，而不仅仅是转到其他页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7162300/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I detect when the user is leaving my site, not just going to a different page?
提问by gfivehost
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.
我只是希望他们在离开网站时提醒他们。
回答by Facebook Staff are Complicit
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
}
}
回答by Reporter
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.
这只是一个想法，但我认为值得一试。
回答by kthornbloom
If you are having issues because your website may have both absolute and relative local links, I have another solution (using jQuery):
如果您因为您的网站可能同时具有绝对和相对本地链接而遇到问题，我有另一种解决方案（使用 jQuery）：
/* 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;
}
}
});
回答by Siddharth Mehta
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.
我最近在我的网站上实施了一个很好的解决方案。试想一下，您网站中导航用户的所有内容都将是链接（锚标记）、按钮、可点击图像或这些行上的某些内容。它绝对不会成为身体元素。
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.
现在当用户离开网站时会发生什么，他/她可以输入网址并按回车键，单击书签或按后退/前进按钮。
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.
发生的情况是，在这些情况下（当用户离开网站时），正文成为目标中的活动元素，而当用户点击内部网站可导航元素时，情况并非如此。
This is a clean, easy solution. Let me know if you face any issues.
这是一个干净、简单的解决方案。如果您遇到任何问题，请告诉我。
