LOFTER-网易轻博

页面停留时长的处理方案

可使用 onbeforeunload 和 onunload 监控页面离开

简单测试代码，注意

window.onbeforeunload=function(){

    updateViewTime();

// return "确定离开";

}

window.onunload=function(){

    updateViewTime();

}

document.addEventListener('webkitvisibilitychange',function(){

    if(document.webkitVisibilityState=='hidden'){

        b=getTime();             

    }else{

    updateViewTime();

    }

});

微信Ios版本中，在底部会出现横条，横条可前进和后退，按以上方案无法捕获这里的事件，可使用以下方案进行处理：

微信ios回退时，会触发popstate事件

$(function(){

    pushHistory();

});

function pushHistory(){

    window.addEventListener("popstate", function(e){

        // alert("回退！");

updateViewTime();

        window.history.back();

        //在历史记录中后退,这就像用户点击浏览器的后退按钮一样。

// -2可以促使ios返回的页面刷新

// window.history.go(-2);

        //window.history.go(-1);

        //你可以使用go()方法从当前会话的历史记录中加载页面（当前页面位置索引值为0，上一页就是-1，下一页为1）。

        // self.location=document.referrer;

        //可以获取前一页面的URL地址的方法,并返回上一页。

    }, false); 

    var state = {

        title:"",

        url: "#"

    }; 

    window.history.pushState(state, "", "#"); 

};

但回退时页面不会重新加载，故事件无法加载，使用 pageshow 和 pagehide 进行监听，并刷新页面

$(function () {

    var isPageHide = false;

    window.addEventListener('pageshow', function () {

        if (isPageHide) {

            window.location.reload();

        }

    });

    window.addEventListener('pagehide', function () {

        isPageHide = true;

    });

});

参考：

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/onbeforeunload

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/onunload

https://zhuanlan.zhihu.com/p/26733114