如何在浏览器关闭发送请求

如何在浏览器关闭发送请求

有的，我们需要在页面关闭时，统计用户在该网站浏览时长；有时需要告知后台，该用户已离开...
遇到这样的情况并不少见。

只是在此之前，有两件很重要的事情需要区分开来:

• 如何知道浏览器是 关闭 还是 刷新
• 关闭时发送请求，使用哪种 请求方式 才好

页面的生命周期函数

当前有两种表示方式

• 页面生命周期函数
  • DOMContentLoaded —— 浏览器加载 HTML，并构建 DOM 树，但像 和样式这样的资源可能还没有加载。
  • load —— 浏览器加载所有资源（图像，样式等）。
  • beforeunload/unload —— 当用户离开页面时。
• Page Visibility API 教程,Page Lifecycle API 教程
  • Active 阶段 网页处于可见状态，且拥有输入焦点
  • Passive 阶段 只可能发生在桌面同时有多个窗口的情况。
  • Hidden 阶段 用户的桌面被其他窗口占据，网页不可见
  • Terminated 阶段 由于用户主动关闭窗口，或者在同一个窗口前往其他页面，导致当前页面开始被浏览器卸载并从内存中清除
  • Frozen 阶段 网页处于 Hidden 阶段的时间过久，用户又不关闭网页，浏览器就有可能冻结网页，使其进入 Frozen 阶段。不过，也有可能，处于可见状态的页面长时间没有操作，也会进入 Frozen 阶段
  • Discarded 阶段 处于 Frozen 阶段，用户又不唤醒页面，那么就会进入 Discarded 阶段，即浏览器自动卸载网页，清除该网页的内存占用。不过，Passive 阶段的网页如果长时间没有互动，也可能直接进入 Discarded 阶段

判断浏览器是 关闭 还是 刷新

用来判断用户是否离开

通过三种方式来进行判断

• beforeunload/unload
• Terminated 阶段
• 两者结合判断

理论知识够了，开始进行尝试
在此之前，由于页面关闭时，很多方法执行不了，只能通过连接后台进行判断，而且也很准确

var url = "http://127.0.0.1:3000/logout";
function getAajx(url) {
    var client = new XMLHttpRequest();
    client.open("get", url, false); // 第三个参数表明是同步的 xhr
    client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
    client.send();
}
function postAajx(url, data) {
    var client = new XMLHttpRequest();
    client.open("post", url, false); // 第三个参数表明是同步的 xhr
    client.setRequestHeader(
        "Content-Type",
        "application/x-www-form-urlencoded"
    );
    client.send(data);
}

beforeunload/unload

当浏览器窗口关闭或者刷新时，会触发beforeunload事件。当前页面不会直接关闭，可以点击确定按钮关闭或刷新，也可以取消关闭或刷新

由于刷新和关闭都会执行这个方法，因而在beforeunload/unload 中无法进行区分，下面是网友们的各种思路

• 鼠标的位置，由于需要点击关闭按钮，因而鼠标不会在窗口内

window.addEventListener('beforeunload', function () {
    var n = window.event.screenX - window.screenLeft;
    var b = n > document.documentElement.scrollWidth - 20;
    if ((b && window.event.clientY < 0) || window.event.altKey) {
        alert("是关闭而非刷新");
    window.event.returnValue = ""; //这里可以放置你想做的操作代码
    } else {
        alert("是刷新而非关闭");
    }
}, false)

可惜执行不了，主要利用关闭，刷新都会执行 onbeforeunload方法

• 利用刷新跟关闭在不同浏览器中执行的方式不同1,2

var _beforeUnload_time = 0;
var _gap_time = 0;
var is_fireFox = navigator.userAgent.indexOf("Firefox") > -1; //是否是火狐浏览器
window.addEventListener(
    "unload",
    function() {
        _gap_time = new Date().getTime() - _beforeUnload_time;
        if (_gap_time <= 5) {
        postAajx(url, `msg=浏览器关闭&time=${_gap_time}`);
        } else {
        postAajx(url, `msg=浏览器刷新&time=${_gap_time}`);
        }
    },
    false
);
window.addEventListener(
    "beforeunload",
    function() {
        _beforeUnload_time = new Date().getTime();
        if (is_fireFox) {
        postAajx(url, `msg=火狐关闭&time=${_gap_time}`);
        }
    },
    false
);

可以看出，确实是可行，刷新时长都超过 5s，关闭在 5s内。基于Chrome浏览器

需要更多地去验证每个浏览器的细微差别，若是随着浏览器的不断升级，将来标准统一，有可能就没有这样的细微区别，导致执行不了

Terminated 阶段

借助Page Lifecycle API,Page Visibility API 教程,Page Lifecycle API 教程,网友

const getState = () => {
    if (document.visibilityState === "hidden") {
        return "hidden";
    }
    if (document.hasFocus()) {
        return "active";
    }
    return "passive";
};

// Stores the initial state using the getState() function (defined above).
let state = getState();

// Accepts a next state and, if there's been a state change, logs the
// change to the console. It also updates the state value defined above.
const logStateChange = nextState => {
    const prevState = state;
    if (nextState !== prevState) {
        console.log(`State change: ${prevState} >>> ${nextState}`);
        getAajx(url+ "?origin=" + nextState);

        state = nextState;
    }
};

// These lifecycle events can all use the same listener to observe state
// changes (they call the getState() function to determine the next state).
["pageshow", "focus", "blur", "visibilitychange", "resume"].forEach(
    type => {
        window.addEventListener(type, () => logStateChange(getState()), {
        capture: true
        });
    }
);

// The next two listeners, on the other hand, can determine the next
// state from the event itself.
window.addEventListener(
    "freeze",
    () => {
        // In the freeze event, the next state is always frozen.
        logStateChange("frozen");
    },
    { capture: true }
);

window.addEventListener(
    "pagehide",
    event => {
        if (event.persisted) {
        // If the event's persisted property is true the page is about
        // to enter the page navigation cache, which is also in the frozen state.
        logStateChange("frozen");
        } else {
        // If the event's persisted property is not true the page is
        // about to be unloaded.
        logStateChange("terminated");
        }
    },
    { capture: true }
);

由于各个浏览器显示不同，上述效果不是很准确，特意使用 PageLifecycle.js再重新梳理一遍

<script src="./dist/lifecycle.es5.js"></script>
<script>
    console.log(window)
    lifecycle.addEventListener('statechange', function(event) {
    console.log(event.oldState, event.newState);
    getAajx(url+'?origin='+event.oldState+'>>>'+event.newState)
    });
</script>

很遗憾，刷新跟关闭一样，依旧无法判断出来。

综上： 目前真的只能靠 方案一:beforeunload/unload 时间来进行判断了

使用什么方式进行请求

• img 动态创建img 利用 src属性进行通知,同理script的src应该也可以
• XMLHttpRequest 同步发送ajax请求（上述例子便是如此操作）
• navigator.sendBeacon() sendBeacon 这个方法主要用于满足统计和诊断代码的需要，这些代码通常尝试在卸载（unload）文档之前向web服务器发送数据

// 兼容性
navigator.sendBeacon = navigator.sendBeacon || new Function('var r = new XMLHttpRequest();r.open("POST",arguments[0],true);r.send(arguments[1]);');

function postForm (url, data) {
  let P = new FormData()
  P.append('origin', data.origin)
  navigator.sendBeacon(url, P)
}
lifecycle.addEventListener('statechange', function(event) {
  // getAajx(url+'?origin='+event.oldState+'>>>'+event.newState)
  postForm(url, {origin: event.oldState+'>>>'+event.newState })
});

也是可以发送请求的，由于异步，所以跟同步的ajax不同，但是这个确实更合理

总结

• 浏览器刷新 关闭 目前只能通过时间大小来判断了，不完美
• 发送请求 navigator.sendBeacon这个会更好