用history api"偷换"浏览器历史记录

HTML5提供了新的history接口，例如pushstate，以及popstate。通常情况下，浏览器的历史记录能保存访问历史，但是因为有了history api，pushstate和replacestate，我们甚至可以“偷换掉”浏览器的历史记录，偷走后退按钮，让浏览者点按“后退按钮”时，到一个你指定的网页，看起来就像是真的后退历史记录一样！这个网页还可以跨域，而且就算不存在向前d历史记录也能创建。有什么好处呢？想让访客更多的留在你的网站上？想要……？

 

用history api"偷走"浏览器后退按钮

实现代码如下：

 

第一步，创建一个历史

这一步创建一个带有hash的历史，方便popstate监听.

 

第二步，监听并跳转

当按下后退按钮时，检查到有#!/stealingyourhistory的hash时，则利用setTimeout函数来跳转到你指定的网页，例如设计为按下后退按钮后，不是返回上一个历史记录而是到博客主页

全部实现代码如下

(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，按此。

这样一来，你就可以“偷走”浏览器的后退历史记录，当按下后退按钮，不会后退，而是到你指定的某个网页了。

不过如果你想用这个方式增加PV或者做什么坏事的话，确实不友好哦。

 

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

 

justcode.ikeepstudying.com