监听chrome浏览器关闭或者刷新页面事件并在确认切换页面前做一些处理

监听chrome浏览器关闭或者刷新页面事件并在确认切换页面前做一些处理
onbeforeunload:在发起新请求之前调用
onunload:在新请求请求结束要替换本页面前调用
以一个需求为例:
需求是实现在上传视频过程中(此时视频的信息已经保存),刷新或者关闭本页面时,请求后端删除被中断上传视频的信息。
代码如下:

window.onbeforeunload = onbeforeunloadHandler;
window.onunload = onunloadHandler;
function onbeforeunloadHandler(){
    var flag = $('.arriveInfo') && $('.arriveInfo').length>0;
    if(flag){//操作标识:如果已经上传完成信息,则进行被中断上传视频信息的删除
        return "视频正在上传过程中,信息已存储,建议不要离开!";
    }
    
}
function onunloadHandler(){
    //用户确认离开页面
    var flag = $('.success') && $('.success').length>0;
    if(!flag){//操作标识:如果视频已经上传完成,则不进行信息删除,否则执行如下操作
        $.ajax({
            url:'./delete',
            type:'POST',
            dataType:'json',
            data:{videoId:videoId},
            async:false,
            error:function(e){
                alert('同步失败');
            }
        });
    }
}

在onunload事件中进行Ajax请求时,需要注意不能使用异步请求,否则在请求未成功时,页面就被新页面取代,无法完成请求。

此条目发表在PHP分类目录。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注