欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>javascript教程

目录导航

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

美国HS机房 发布于 2014-03-20  

javascript教程

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

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

用history api"偷换"浏览器历史记录-图片1
用history api"偷换"浏览器历史记录-图片1

实现代码如下:

第一步,创建一个历史

这一步创建一个带有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://www.ldisp.com/a/javascript/2014/html5-history.shtml

上一篇:不刷新改变URL: pushState + Ajax
下一篇:移动web开发,12个触摸及多点触摸事件常用Js插件

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

0

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理