怎样监控页面的进入与离开

Question

想知道图片中的效果是怎样实现的描述：打开本页面时title更改为‘被你发现了’几秒后恢复成真实标题，离开本页面时再次修改title，这是用什么方法来监控页面切换的页面地址

Answer 1

判断浏览器是否取得了焦点或者失去焦点，然后动态修改title

window.onfocus = function () {  document.title = '你不要我了';
};window.onblur = function () {  document.title = '你又回来找我了';
};

Answer 2

// 浏览器状态function browser_status(action) {    // 各种浏览器兼容
    let hidden, state, visibilityChange,status    if (typeof document.hidden !== "undefined") {
        hidden = "hidden"
        visibilityChange = "visibilitychange"
        state = "visibilityState"
    } else if (typeof document.mozHidden !== "undefined") {
        hidden = "mozHidden"
        visibilityChange = "mozvisibilitychange"
        state = "mozVisibilityState"
    } else if (typeof document.msHidden !== "undefined") {
        hidden = "msHidden"
        visibilityChange = "msvisibilitychange"
        state = "msVisibilityState"
    } else if (typeof document.webkitHidden !== "undefined") {
        hidden = "webkitHidden"
        visibilityChange = "webkitvisibilitychange"
        state = "webkitVisibilityState"
    }    // 添加监听器，在title里显示状态变化
    document.addEventListener(visibilityChange, function() {
        status = document[state]        if (document[state] == 'hidden') {            document.title = '你不要我了'
        } else {            document.title = '你又回来找我了'
        }
    }, false)
}