Question

我有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";
    }
}

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

我只是希望他们提醒他们是否会离开网站。

Answer 1

不可能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
    }
}

Answer 2

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

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

a标签的html必须如下所示：

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

并在您的函数中：

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

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

Answer 3

如果由于您的网站可能同时具有绝对和相对本地链接而遇到问题，我还有另一种解决方案（使用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;
        }
    }
});

Answer 4

因此，我需要执行此操作，以便如果用户从任何页面离开站点，都可以注销该用户，但是如果他们在站点内导航，则可以注销该用户。这是我使用JS和PHP的解决方案

在需要保持登录状态的每个页面上，设置一个会话变量：

<?php
    session_start();
    $_SESSION["isInSession"] = true;
?>

现在创建两个脚本：

clear-in-session.php

<?php
    session_start();
    unset($_SESSION["isInSession"]);
?>

logout.php

<?php
    session_start();
    if(isset($_SESSION["isInSession"]) exit();
    //do logout code here
?>

现在我们在JS中设置2个事件：

window.addEventListener('beforeunload', function(event) {
    $.ajax({
        type: 'POST',
        async: false,
        url: 'clear-in-session.php'
    });
});
window.addEventListener('unload', function(event) {
    $.ajax({
        type: 'POST',
        async: false,
        url: 'logout.php'
    });
});

要解释用户导航到同一站点中的另一个页面时的事件顺序：

用户导航
beforeunload ，调用 clear-in-session.php ，该操作将删除 isInSession 变量
已加载新页面，并将 isInSession 设置为true
卸载被触发，调用 logout.php ，但是由于 isInSession 已设置回true，因此永远不会调用注销代码

当用户导航到网站外部的页面（或网站上未设置 isInSession 的任何页面）时：

用户导航
beforeunload ，调用 clear-in-session.php ，该操作将删除 isInSession 变量
新页面已加载
卸载，调用 logout.php ， isInSession 已被删除，因此注销代码称为

对不起，坏死，但是当寻找这个问题的答案时，这个话题仍然出现

注意：此答案使用jQuery来发布对php的调用。完全可以在纯JS中做到这一点，但在jQuery中更容易说明

Answer 5

我最近在我的网站上实现了一个很好的解决方案。想象一下，在您的网站中导航用户的所有内容都将是链接（锚标记），按钮，可点击图像或这些行上的某些内容。它肯定不会成为身体元素。

现在当用户离开网站时会发生什么，他/她可以输入网址并按Enter键，点击书签或按后退/前进按钮。

当用户这样做时，请执行以下操作：

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

在这些情况下（当用户离开网站时）身体成为目标中的活动元素，而当用户点击内部网站可导航元素时则不是这种情况。

这是一个干净，简单的解决方案。如果您遇到任何问题，请告诉我。

如何检测用户何时离开我的网站，而不仅仅是去另一个页面？

5 个答案: