HTML5提供了新的history接口，例如pushstate，以及popstate。通常情況下，瀏覽器的歷史記錄能保存訪問歷史，但是因為有了history api，pushstate和replacestate，我們甚至可以“偷換掉”瀏覽器的歷史記錄，偷走后退按鈕，讓瀏覽者點按“后退按鈕”時，到一個你指定的網(wǎng)頁，看起來就像是真的后退歷史記錄一樣！這個網(wǎng)頁還可以跨域，而且就算不存在向前d歷史記錄也能創(chuàng)建。有什么好處呢？想讓訪客更多的留在你的網(wǎng)站上？想要……？

?

用history api"偷走"瀏覽器后退按鈕

實現(xiàn)代碼如下：

?

第一步，創(chuàng)建一個歷史

這一步創(chuàng)建一個帶有 hash 的歷史，方便popstate監(jiān)聽.

?

第二步，監(jiān)聽并跳轉(zhuǎn)

當(dāng)按下后退按鈕時，檢查到有#!/stealingyourhistory的hash時，則利用setTimeout函數(shù)來跳轉(zhuǎn)到你指定的網(wǎng)頁，例如設(shè)計為按下后退按鈕后，不是返回上一個歷史記錄而是到博客主頁

全部實現(xiàn)代碼如下

      (function(window, location) {

history.replaceState(null, document.title, location.pathname+"#!/stealingyourhistory");

history.pushState(null, document.title, location.pathname);

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

if(location.hash === "#!/stealingyourhistory") {

history.replaceState(null, document.title, location.pathname);

setTimeout(function(){

location.replace("http://blog.netsh.org/");

},0); } }, false);  }(window, location));
    

?

"偷換"瀏覽器后退歷史記錄 Demo

如果想要實實在在地看一個Demo， 按此 。

這樣一來，你就可以“偷走”瀏覽器的后退歷史記錄，當(dāng)按下后退按鈕，不會后退，而是到你指定的某個網(wǎng)頁了。

不過如果你想用這個方式增加PV或者做什么壞事的話，確實不友好哦。

?

原文： http://blog.netsh.org/posts/history-stealing_1593.netsh.html

?

justcode.ikeepstudying.com

?