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