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
相关推荐
当使用浏览器历史记录较长的浏览器时,您可能会遇到速度变慢的情况。 如何使用 const BrowserHistory = require ( 'node-browser-history' ) ; //Only All Support Browser History /** * Gets the history for the...
connect-history-api-fallback, 返回到使用 HTML 5历史记录API的应用程序的回退到 index.html connect-history-api-fallback通过指定索引页面向代理请求请求中间件,这对于使用HTML5历史API的单页应用程序。...
Alfred Chrome历史记录工作流程使用ch {query}从Alfred访问您的Google Chrome历史记录。如何安装然后双击进行安装。从来源克隆此<sync>/Alfred.alfredpreferences/workflows/alfred-chrome-history并将其符号链接到...
浏览器历史记录分析器是一种非常简单易用且方便的工具,用于分析磁盘上的浏览器历史记录。 该工具可以分析三种主流浏览器:Chrome,Firefox,Safari。 该软件可以从文件系统或任何恢复的映像中找到所有与浏览历史...
History 是 window 对象中的一个 JavaScript 对象,它包含了关于浏览器会话历史的详细信息。你所访问过的 URL 列表将被像堆栈一样存储起来。浏览器上的返回和前进按钮使用的就是 history 的信息。 History 对象包含...
就像您的浏览器历史记录一样-更好。您无需执行任何操作即可跟踪所有内容。完全的隐私控制-----------------------------在私人和隐身模式下完全禁止提取,并且可以在任何情况下关闭扩展名时间。通过域和正则表达式...
浏览器历史 browser-history是一个简单的,零依赖,对开发人员友好的python程序包,用于(几乎)在(几乎)任何平台上检索(几乎)任何浏览器的历史记录。特征支持大多数流行的浏览器。 见一个完整的清单。 支持所有...
localhistory是将历史记录存储到的浏览器库。 防止localStorage异常到达您的代码。 修剪较旧的条目,以避免使localStorage饱和。 约1k缩小并压缩。 没有依赖关系。 localhistory最初是为了向语言游乐场添加...
要求您可以在以下任何浏览器上运行此WebExtension: 谷歌浏览器Firefox 50.0版( )及更高版本Opera版本33及更高版本维瓦尔第Microsoft Edge也正在获得对WebExtensions的支持,但是,仅当Microsoft 历史记录API时,...
该Javascript库为较旧的浏览器提供了HTML5历史记录API的仿真。 该库根据W3C规范运行,没有添加任何新方法或不兼容的方法。 可以完全按照例如Dive Into HTML5书( )或History API规范( )中的描述使用该库 )。 您...
history, 使用JavaScript管理会话历史记录 历史 是一个JavaScript库,它允许你在任何JavaScript运行时轻松管理会话历史。 history 抽象出不同环境中的差异,并提供一个最小的API,允许你管理历史堆栈。导航。确认...
Chrome浏览器扩展程序,可让您按日期浏览历史记录,而不是无限滚动。 下载/安装 很简单: 为什么? 我沉迷于每一分钟。 而且,我经常参考自己的Chrome浏览器历史记录,以了解自己在某些日子的某些时间所做的事情。...
前端项目-html5-history-api,不支持pushstate、replaceState的浏览器的HTML5历史API扩展
MozillaHistoryView 是一个小巧的工具,可以读取 Firefox/Mozilla/Netscape 浏览器的历史数据文件(history.dat),并按照最后日期列表显示所有访问页面,访问的每个页面包含以下信息:URL,第一次访问日期,最后一...
history-server:一个用于单页应用的 HTTP服务器使用HTML5 history API实现
一个Cycle.js驱动程序,用于管理浏览器历史记录。 安装 npm install @r7kamura/cycle-history-driver 用法 import Cycle from '@cycle/core' ; import { makeDOMDriver } from '@cycle/dom' import { ...
一款替换chrome历史记录的插件,并提供一个日历可以直接选择日期,再也不用一直往下拖了!当然,如果你就是喜欢往下拖动页面去一天一天的找记录的话,也是可以的。
Atom-atom-cursor-history.zip,光标位置历史记录管理器光标历史记录,atom是一个用web技术构建的开源文本编辑器。
但是,利用HTML 5的History API,我们可以更好的控制浏览器的历史记录了。例如:我们可以添加一条记录到历史记录的列表中,或者在没有刷新时,可以更新地址栏的URL。 为什么介绍History API ? 在这篇文章中,...
历史模块用于操作浏览器会话历史。 安装 成分 $ component install anchorjs/history 沃洛 $ volo add anchorjs/history 兼容性 成分 该模块使用格式。 要包含在组件构建中,请使用 : component build -u ...