Window.history保存用户在一个会话期间的站点訪问记录,用户每次訪问一个新的URL即创建一个新的历史记录。

history.go()、history.back()、history.forward()

history.back()和history.forward()分别表示向后一页和向前一页。

history.go(num)表示向前或向后翻多少页。num为正数表示向前翻。为负数则向后翻。

History.back()等价于history.go(-1),history.forward()等价于history.go(1)。

运行这三个中的任一方法,触发浏览器的popstate事件,假设仅仅是hash部分发生变化。还可能同一时候触发hashchange事件。

改动站点路径并创建新的历史记录

history.pushState(statedata, title, url);

參数URL必须和当前URL同源。否则会报错。仅仅能够改动URL中路径、井号之后的片段(即hash)或者URL中问号(?)之后的查询区段。

每运行一次pushState()用新的URL替换掉当前URL。即地址栏URL会变,window.location.href也会变,同一时候创建一个新的历史记录。但运行pushState()永远不触发hashchange事件。

參数statedata能够是不论什么被序列化的数据。这些数据被保存在用户硬盘上。但状态数据有限制大小,比方Firefox仅仅同意640KB字符。

使用pushState()的优点:仅仅改URL的hash部分,window.location使用的是同一个document。

兼容性问题

pushState直到IE10才被支持,在早版本号的IE中仅仅能通过改动window.location=”#foo”完毕。但这样会触发hashchange事件。

改动站点路径但不创建新的历史记录

看标题就知道了,replaceState()和pushState()的唯一差别是不创建新的历史记录。而是直接改动当前历史记录。

history.replaceState(stateData, title, url);

历史记录状态

有两种方式能够訪问历史訪问记录的状态信息,history.state返回历史訪问堆栈最顶端的记录的状态;而PopStateEvent.state值有在PopStateEvent事件触发的时候在事件监听中才干訪问。

State的默认值在不同浏览器可能不同。比方IE10下面默认是undefiend,但IE10和IE11默认是null。

HTML5推荐使用nul为默认值。

事件

popstate事件

调用history.back()、history.forward()、history.go()等方法。会触发popstate事件,单纯调用pushState()或replaceState()不触发popstate事件。

訪问事件的state属性可获取当初pushState()或replaceState()设置的状态数据。

具体解释window.history的更多相关文章

  1. 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. js pjax 和window.history.pushState,replaceState

    原文:http://blog.linjunhalida.com/blog/pjax/ github:https://github.com/defunkt/jquery-pjax 什么是pjax? 现在 ...

  3. 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL (转)

    在访问现在很火的google plus时,细心的用户也许会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器的前进和后退.不禁让人想问,是什么有这么强大 ...

  4. safari 浏览器window.history.go(-1)运行无效解决办法

    这几天做了几个手机端app的wap页面,做完之后发现一个问题,那就是ios系统下的safari浏览器不支持window.history.go(-1)..无语... 解决方法很简单!加上return f ...

  5. javascript:window.history.go(-1)

    history是你浏览过的网页的url(简单的说就是网址)的集合,也就是你的浏览器里的那个历史记录.它在js里是一个内置对象,就跟document一样,它有自己的方法,go就是其中一个. 这个方法的参 ...

  6. window.history 和 DWZ 框架

    DWZ框架的ajax请求返回的一般都是一个HTML片段,整个页面是由一个个HTML片段组成的,可以由TAB切换其内容,但是只有一个body和HEAD,一般head 和 菜单栏是不会动的. 今天遇到一个 ...

  7. window.history.pushState与ajax实现无刷新更新页面url

    ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...

  8. javascript宿主对象之window.history

    window.historys属性允许我们操作同一个浏览器回话中的已访问页面,例如我们可以看到在这之前我们浏览页面的数量: window.history.length 由于隐私保护,我们无法获取这些页 ...

  9. 由window.history.back()引发的问题

    由window.history.back()引发的问题 编写人:CC阿爸 2015-1-30 今天在这里,我想与大家一起分享由windows.history.back()引发的问题,笔者在实际开发当中 ...

随机推荐

  1. Linux-实现双主模型的nginx的高可用

    实现双主模型的ngnix高可用(一) 准备:主机7台 client: 172.18.x.x 调度器:keepalived+nginx 带172.18.x.x/16 网卡 192.168.234.27 ...

  2. perl学习之:理解贪婪匹配和最小匹配之间的区别

    正则表达式的新手经常将贪婪匹配和最小匹配理解错误.默认情况下,Perl 的正则表达式是“贪婪地”,也就是说它们将尽可能多地匹配字符. 下面的脚本打印出“matched defgabcdef”,因为它尽 ...

  3. python--初识html前端

    一.HTML文档结构 最基本的HTML文档: <!DOCTYPE html> <html lang="zh-CN"> #这个lang表示语言,zh-CN是中 ...

  4. JavaScript正则表达式-反向引用

    使用括号“()”进行分组,使子表达式(子模式)可以作为整体独立被修饰,子表达式所匹配的结果会被记录下来并可以单独被访问. /(a(b(cd){2})+)EF/ 则各引用分别对应: \1  对应(a(b ...

  5. 内涵段子爬取及re匹配

    案例:使用正则表达式的爬虫 现在拥有了正则表达式这把神兵利器,我们就可以进行对爬取到的全部网页源代码进行筛选了. 下面我们一起尝试一下爬取内涵段子网站: http://www.neihan8.com/ ...

  6. mac securecrt自动保存密码

    一.问题描述 mac有自带的终端,可以运行ssl和sftp,但是目录操作,文件操作和文件上传是分开的,很不方便,并且文件上传命令需要文件的全路路径. 使用securecrt能方便的解决上述的问题,并且 ...

  7. 00048_this关键字

    1.this调用构造方法 (1)构造方法之间的调用,可以通过this关键字来完成: (2)构造方法调用格式 this(参数列表); (3)小案例 class Person { // Person的成员 ...

  8. volatile随笔见解

    1.volatile可以保证可见性,不能保证一致性,但是与cas操作结合在实现并发上性能很不错,java并发包下不少类都有这种实现方式. 2.相比synchronized执行成本更低,因为它不会引起线 ...

  9. lfyzoj103 割海成路之日

    问题描述 现在,摆在早苗面前的是一道简单题.只要解决了这道简单题,早苗就可以发动她现人神的能力了: 输出 \[1\ \mathrm{xor}\ 2\ \mathrm{xor} \cdots \math ...

  10. Educational Codeforces Round 26

    Educational Codeforces Round 26 困到不行的场,等着中午显示器到了就可以美滋滋了 A. Text Volume time limit per test 1 second ...