beforeunload在離開頁面前執行商務邏輯

標籤：style   blog   io   ar   color   sp   for   on   div   

window有個beforeunload事件，是在離開頁面前觸發的；大家肯定會很快聯想到unload這個事件，二者有的區別還是蠻大的，字面上就很好理解，beforeunload在時間軸上在unload之前執行，分解點就是頁面卸載時間；

經常會有一些在使用者離開頁面前執行一些業務的應用情境，這都要用到onbeforeunload事件；比如記錄使用者停留時間長度的業務，在GA等頁面訪問統計的應用中都包含這個：

 1 ;(function(){ 2     var startTime = Math.ceil(new Date().getTime()/1000), //單位秒 3         getDuration = function(){ 4             var time = ‘‘, 5                 hours = 0, 6                 minutes = 0, 7                 seconds = 0, 8                 endTime = Math.ceil(new Date().getTime()/1000), 9                 duration = endTime - startTime;10 11             hours = Math.floor(duration/3600); //停留小時數12             minutes = Math.floor(duration%3600/60); //停留分鐘數13             seconds = Math.floor(duration%3600%60); //停留秒數14 15             time = (hours < 10 ? ‘0‘ + hours : hours) + ‘:‘ + (minutes < 10 ? ‘0‘ + minutes : minutes) + ‘:‘ + (seconds < 10 ? ‘0‘ + seconds : seconds);16 17             return time;18         };        19 20 21     window.onbeforeunload = function(e){22         var duration = getDuration();23 24         //request(duration);25     };26 })();

 

beforeunload在離開頁面前執行商務邏輯