时间戳

首页 > 解决方案 > 试图处理卸载事件

javascript - 试图处理卸载事件

问题描述

当我关闭浏览器或转到其他页面时，我正在尝试执行一些操作，但它什么也没做，这是底部的脚本，有我尝试过的 rwho 方式。我尝试使用 jquery 我意识到该unload功能已被弃用

if(game_id){
    get_players();
    get_users();
}

function get_players(){
    socket.emit('on_lobby', {
        game_id:game_id,
    });
    socket.on('lobby_connected',function(){
        $.ajax({
            url:'/getPlayers',
            method:'GET',
            data:{
                game_id: game_id
            }
        }).done(function(response){
            if(response.status === 'ok'){
                $('#connected_players').empty();
                $('#connected_players').append(response.html);
                
            }else{
                Swal.fire({
                    icon: 'error',
                    text: response.message,
                })
            }
        });
    });
}

function get_users(searched){
    $.ajax({
        url:'/getConnectedUsers',
        method:'GET',
        data:{
            searched:searched
        }
    }).done(function(response){
        if(response.status === 'ok'){
            $('#connected_users').empty();
            $('#connected_users').append(response.html);
            
        }else{
            Swal.fire({
                icon: 'error',
                text: response.message,
            })
        }
    });
}

function search_users(){
    var searched = $('#search-user-input').val();
    get_users(searched);
}

function send_invitation(receiver){
    socket.emit('private',{
        type:'invitation',
        receiver: receiver,
        sender: username,
        text:'/game/' + game_id
    });
}
socket.on('user_loged', function(){
    get_users();
})
socket.on('user_loged_out', function(msg){
    if($('#player-item-'+ msg.username ) !== undefined){
        $('#player-item-'+ msg.username).remove();
    }
    get_users();
})

//not work
window.onunload = unloadPage;

function unloadPage()
{
 alert("unload event detected!");
}
//doesn't works too
window.addEventListener('unload', function(event) {
    alert('I am the 3rd one.');
});

标签： javascript

解决方案

使用beforeunload事件处理程序。引用MDN Web Docs ...

当窗口、文档及其资源即将被卸载时，会触发 beforeunload 事件。文档仍然可见，此时事件仍然可以取消。

你是对的，unload()在 jQuery 中已被弃用！他们并没有完全说出来，但他们确实在文档页面上列出beforeunload了可能的替代方案......unload()

在实际使用中，应该在所有支持的浏览器上测试 [unload()] 行为，并与类似的 beforeunload 事件进行对比。

在下面的一个简单示例中，处理程序检查用户是否可以重定向或刷新，如果可以，则允许事件正常处理（关闭窗口），否则，我们取消事件（返回 false 或取消默认值应该是足够了，但我喜欢两者都做）。

在纯 JavaScript...

window.onbeforeunload = function (e) {
    if(confirm()) {
        return true;
    }
    e.preventDefault();
    return false;
};

推荐阅读