Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/450.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 当用户离开某些网页时,如何触发事件?_Javascript_Html - Fatal编程技术网

Javascript 当用户离开某些网页时,如何触发事件?

Javascript 当用户离开某些网页时,如何触发事件?,javascript,html,Javascript,Html,在我的项目中,我有一个服务器和几个html页面,它们通过标记相互链接,而我的index.html是用户登录到我的服务器的页面 我的页面有index.html(登录名)、home.html(主页)、statistics.html(登录用户可以在其中以表格格式查看来自我的服务器的信息)和notifs.html(登录用户可以在其中查看我的服务器执行的过去通知的历史记录) 当用户想要登录时,会向我的服务器发送一个请求以登录该用户,我会收到一个带有用户帐户信息的JSON作为响应,我将其存储在localst

在我的项目中,我有一个服务器和几个html页面,它们通过标记相互链接,而我的index.html是用户登录到我的服务器的页面

我的页面有index.html(登录名)、home.html(主页)、statistics.html(登录用户可以在其中以表格格式查看来自我的服务器的信息)和notifs.html(登录用户可以在其中查看我的服务器执行的过去通知的历史记录)

当用户想要登录时,会向我的服务器发送一个请求以登录该用户,我会收到一个带有用户帐户信息的JSON作为响应,我将其存储在localstorage中,当用户注销时,会发送一个请求以注销他们,我会从localstorage中删除该对象

如果用户未登录,则无论他们位于上面提到的页面中的哪个页面,他们都会被重定向到index.html

我的问题是:每当用户以某种方式离开我项目的任何html页面时,我都需要注销用户 (如果他们离开该页面,但转到我的另一个页面,则不应注销,但如果他们在同一窗口上的其他地方,例如www.google.com或当窗口关闭时,则应注销)但在beforeunload事件中,用户注销,当用户离开页面时激发,但它不区分目标是我的某个页面还是另一个页面,或者窗口关闭,因此,如果用户尝试转到我项目的另一个页面,则会注销

function logoutAccount(redirect) {
    if(localStorage['loggedAccount']){
        var account=JSON.parse(localStorage['loggedAccount']);
        var logoutRequest=new XMLHttpRequest();
        logoutRequest.open('GET',url+"/logout/"+account.id,false);
        logoutRequest.send(null);
        localStorage.removeItem('loggedAccount');
        if(redirect){
            window.location.replace("index.html");
        }
    }else{
        if(redirect){
            window.location.replace("index.html");
        }
    }
}

document.getElementById("logoutButton").addEventListener("click",function () {
    logoutAccount(true);
});

$(window).on("beforeunload", function() {
    logoutAccount(false);
});
到目前为止,我还没有找到任何方法来判断他们是否将进入我的项目的另一个页面或在另一个页面中,或者窗口是否正在关闭。。。最后,我总是回答说,我应该使用beforeunload事件,在用户离开页面之前发出警告,而不是将其注销。但是,如果用户出于任何原因突然忽略了警告,那么我的web应用程序将不得不依赖于带有localstorage中帐户信息的JSON是否仍然存在,否则,该用户将无法再次登录,我想阻止这种情况

这是用于注销用户的代码,我将其放在页面的所有脚本中,除了index.html中的脚本。 (当函数logoutAccount由其专用按钮调用时,redirect参数为true,但如果它由beforeunload事件调用,则redirect为false,因为用户不应返回登录页面(在本例中为index.html),因为如果他们转到我的项目的某个页面,他们仍应登录。)

如前所述,这将导致用户在离开页面时注销,即使他们要转到我项目的另一个页面,这不是我想要的结果

这是允许用户登录的代码,位于index.html脚本中:

function onLogin () {
    var username = document.getElementById('username');
    var password = document.getElementById('password');
    var data = {};
    data.userName = username.value;
    data.passWord = password.value;
    if(localStorage["AccountTokent"]){
        data.token = localStorage["AccountTokent"];
        localStorage.removeItem("AccountTokent");
    }else{
        data.token="some random generated text";
    }


    var json = JSON.stringify(data);

    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function () {
        if(xhr.readyState === 4 && xhr.status === 200) {
            localStorage.setItem('loggedAccount',xhr.responseText);
            window.location.replace("home.html");
        } else if (xhr.status === 401) {
            alert("Wrong password or username");
        }
    };

    xhr.open('POST', url + "/login", false);
    xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
    xhr.send(json);
}
因此,只要用户已登录并且位于我的项目的某个页面上,他们的帐户仍应登录


例如,如果他们从home.html离开到www.google.com,那么他们将注销,这很好,但是如果他们从home.html离开到notifs.html,那么他们将注销并重定向到index.html,这是我想要阻止的。

在每次重定向时,您可以等待一定的时间(几秒钟)如果用户不再在你的页面上,你就把他注销。您可以在后端(硬但更一致)执行此操作,或者在他重定向时将时间戳放入localStorage,并且只有在时间戳为x秒时才接受其登录状态。@MixT4PE如果我完全理解您将时间戳放入localStorage的想法,在卸载之前(或每次使用window.location.replace()之前),我必须在localstorage中为事件添加一个时间戳,然后当用户从我的项目中转到某个页面时,我检查时间戳是否存在,是否有x秒的时间戳,如果没有,则该用户注销。是吗?是的,这就是我的建议。您还可以说“未登录”,因为他提供的身份验证(localStorage)在每次重定向时通过您的检查(超过x秒)是“无效的”,您可以等待设定的时间量(几秒),如果用户不再在您的页面上,您可以将其注销。您可以在后端(硬但更一致)执行此操作,或者在他重定向时将时间戳放入localStorage,并且只有在时间戳为x秒时才接受其登录状态。@MixT4PE如果我完全理解您将时间戳放入localStorage的想法,在卸载之前(或每次使用window.location.replace()之前),我必须在localstorage中为事件添加一个时间戳,然后当用户从我的项目中转到某个页面时,我检查时间戳是否存在,是否有x秒的时间戳,如果没有,则该用户注销。是吗?是的,这就是我的建议。您不妨说“未登录”,因为他提供的身份验证(localStorage)在您的检查中“无效”(超过x秒)