JS检测用户打开和关闭浏览器操作，计算当前访客数的高兼容性方案

var send_end = false,  // 控制是否发送离开信号
    isOpenNewPage = true,  // 控制是否发送访问信号
    request_id = $('html')[0].id;  // 某次请求流程的唯一标识

function sendStart() {  // 发送访问信号，访客数+1
    if (!isOpenNewPage) {return;}  // 不同的浏览器支持的监听方法不同，通过全局变量控制多次检测到也只发送一次
    $.ajax({
        type: "GET",
        url: "/start",
        data: {request_id: request_id},
        success: function (res) {
            send_end = true;  // 设置可以发送离开信号
            isOpenNewPage = false;  // 设置不可以发送访问信号
        }
    })
}

function sendEnd() {  // 发送离开信号，访客数-1
    if (!send_end) {return;}  // 不同的浏览器支持的监听方法不同，通过全局变量控制多次检测到也只发送一次

    // 这里是为了处理前进、后退、刷新的场景
    send_end = false;  // 设置不可以发送离开信号
    isOpenNewPage = true;  // 设置可以发送访问信号

    // 准备数据
    let url = "/end?request_id=" + request_id;
    let formData = new FormData();
    formData.append("csrfmiddlewaretoken", CSRFToken);

    if (navigator.sendBeacon) {
        // 浏览器关闭场景专用方法navigator.sendBeacon允许浏览器关闭后发送数据
        navigator.sendBeacon(url, formData);
    } else {
        // 兼容不支持navigator.sendBeacon的浏览器，同步方式发送数据
        let xhr = new XMLHttpRequest();
        xhr.open("POST", url, true);
        xhr.send(formData);
    }
}

window.onload = function () {
    // pageshow和pagehide主要适配android和IOS的用户行为检测
    window.addEventListener("pageshow", function() {
        var regex = /.*csrftoken=([^;.]*).*$/;
        CSRFToken = document.cookie.match(regex) === null ? "" : document.cookie.match(regex)[1];
        sendStart();
    }, false);
    window.addEventListener('pagehide', sendEnd, false);

    // 适配PC端的用户行为检测
    window.addEventListener('beforeunload', sendEnd, false);
    window.addEventListener('onunload', sendEnd, false);

    // 另一种检测方式，提高兼容性
    document.addEventListener('visibilitychange', function() {
        if (document.visibilityState === 'hidden') {
            sendEnd();
        } else if (document.visibilityState === 'visible') {
            sendStart();
        }
    }, false);
}

 

本文地址：https://blog.csdn.net/kuanggudejimo/article/details/109627850