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

系统 1526 0

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

 

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


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论