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

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

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

history-stealing-500x418

实现代码如下:

第一步,创建一个历史

这一步创建一个带有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

Leave a Reply