Lie of Music: 記錄使用者瀏覽時間和下一頁

在做清大科管所的clay0529學長的BuzzShare（可以自己選擇廣告的插入廣告服務，Mr.6有分享過喔:P）的時候用了這樣的方法，在此分享。簡言之就是在使用者要離開的時候引入一個檔案囉，麻煩的是要怎麼得知「下一頁」是什麼:P。

步驟一：當然要先紀錄進入頁面的時間，用now = new Date(); start = now.getTime();就可以了

步驟二：寫一個要在離開頁面的時候執行的function。因為你不一定會想改（或說不一定能改）<body />的onunload標籤，而直接把window.onunload覆寫掉也不是個好辦法（因為可能已經有設定別的東西要執行了），所以最好是用attachEvent或是addEventListener，可以參考【Javascript: 附加 onload 事件】。function whenLeaving() { var now = new Date(); var stayTime = now.getTime() - start; addJavaScript('abc.php?stayTime=' + stayTime); /*addJavaScript()是我之前寫的一個可以加入JavaScript的function（原本主要是拿來做XSS用的）要注意的是不可以用document.write來生成<script />，否則會有想是換頁的情形發生喜歡的話，用CSS（用我的addStyleShett）甚至是圖片也可以至於如何不使用document.write來生成物件，可以查一下document.createElement() 另外，abc.php到底要output什麼出來就隨便囉我自己是都留白（單純只把資料寫進資料庫，不做任何輸出）....*/ } if(window.addEventListener) window.addEventListener('load', whenLeaving, false); else if (window.attachEvent) window.attachEvent('onload', whenLeaving); /*其實可以另外寫一個function來做這件事*/ function addEvent(obj, event, func) { if(window.addEventListener) obj.addEventListener(event, func, false); else if (window.attachEvent) obj.attachEvent('on'+event, func); }

原則上到這裡就可以記錄使用者停留時間了。

步驟三：修改<a />的onclick，取出接下來要進入的頁面的連結
我原本以為下面這樣就可以了tagA = document.getElementsByTagName('a'); for(i = 0; i < tagA.length; i++) addEvent(tagA[i], 'click', function(){next = tagA[i].href;});不過至少在IE下會發生i值變動的問題。幸好這個問題在我之前在無名的Homepage板問過之後，星周(starjou)學長有解答過（簡言之就是用區域變數來繞過全域變數的問題），所以迴圈的部份改成下面這樣：for(i = 0; i < tagA.length; i++) { function a() { var j = i; addEvent(tagA[j], 'click', function(){next = tagA[j].href;}); } a(); }

步驟四：再修改一下步驟二的函數
把原本要引入的檔案多加上「下一頁」的參數囉addJavaScript('abc.php?stayTime='+stayTime+'&nextPage='+next);

這個方法原則上也可以用XSS的方法來做（事實上BuzzShare的部份我就是這樣子做）。另外就是我目前沒有處理表單送出的部份（頁面停留時間仍然可以記錄，但是「下一頁」就無法判斷了），當然表單還是可以用修改onsubmit的方式來修改，但是要注意的是有些表單（其實<a />也有可能）會被其他的JavaScript更改傳送頁面，所以實做上並不一定可以得知實際被傳送的頁面。（其實我是有想到解決辦法啦，但是有點難解釋，而且也沒有把握一定可行）

另外就是attachEvent()和addEventListener()的問題，由於前者會先執行最後被指定的function，所以有時後有點麻煩，此時可以用另一個方法解決這個問題（後來仔細想想，這個方法好像比較好...orz）var oldOnload = window.onload || function () {}; window.onload = function () { oldOnload(); /* Do Something... */ }

後記：我真的希望我可以多花時間在音樂上面。