<meta name="keywords" content="华夏棋牌,history.replacestate, history.pushstate,,html5,history" />
华夏棋牌 > web前端 > H5教程 > 注释

HTML5 history新特点pushState、replaceState及二者的差异 _html5教程手艺

原创 2016-05-16 15:46:05 0 122
赞助会员专享特权
DOM中的window工具经由历程window.history措施供应了对浏览器历史纪录的读取,让你可以在用户的会见纪录中前进和退却退却。

从HTML5泉源,我们可以泉源操作这个历史纪录客栈。

1.History

应用back(),forward(),和go()措施可以在用户的历史纪录中前进和退却退却

前进和退却退却

退却退却:


复制代码
代码以下:

window.history.back();

这个措施会像用户点击了浏览器工具栏上的前往键一样。

异常的,也能够或许用以下措施发生用户前进行动:


复制代码
代码以下:

window.history.forward();

移动到历史纪录中特定的职位

你可以应用go()措施从session历史中载入特定的页面。

向后移动一页:


复制代码
代码以下:

window.history.go(-1);

向前移动一页:


复制代码
代码以下:

window.history.go(1);

类似的,你可以前进或许退却退却多页。

还可以经由历程检查浏览器历史纪录的length属性来找到历史纪录客栈中的页面总数。


复制代码
代码以下:

var numberOfEntries = window.history.length;

重视:IE支持向go()措施传URL参数。

2.添加和修改history实体

自Gecko2泉源引入 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

HTML5引入了histtory.pushState()和history.replaceState()这两个措施,他们允许添加和修改history实体。同时,这些措施会和window.onpostate事宜一起使命。

应用history.pushState()措施来修改referrer,这类措施可以被用在经由修改状态后而为xmlhttpRequest工具培植的http header中。这个referrer会是培植XMLHttpRequest 时document的URL。

pushState 用于向 history 添加以后页面的纪录,而 replaceState 和 pushState 的用法完全一样,唯一的差异就是它用于修改以后页面在 history 中的纪录。

例子

假定http://mozilla.org/foo.html页面推行了一下JS


复制代码
代码以下:

var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html");

这类措施将会使url地址栏显示http://mozilla.org/bar.html,但浏览器不会加载bar.html页面,纵然这个页面存在也不会加载。

现在再次假定用户一连会见http://谷歌.com,然后点击退却退却。这时间间,url地址栏将会,http://mozilla.org/bar.html,页面会取得popstate事宜(chrome),这个状态工具会网罗一个stateObj的copy。这个页面看起来像foo.html。+

这时间间,我们再次点击退却退却,URL将酿成http://mozilla.org/foo.html,document将取得此外一个popstate事宜和为null的state工具。此次的前往行动并没有改变文档的内容。(或许会过一会考试考试加载…chrome)

pushState措施

pushState()有三个参数:state工具,效果(现在是被忽视,未作处置赏罚赏罚),URL(可选)。详细细节:

· state工具 –state工具是一个JavaScript工具,它关系到由pushState()措施培植出来的新的history实体。用以存储关于你所要拔出到历史 纪录的条目的相关信息。State工具可以是任何Json字符串。由于firefox会应用用户的硬盘来存取state工具,这个工具的最年夜存储空间为640k。假定年夜于这个数 值,则pushState()措施会抛出一个异常。假定确切须要更多的空间来存储,请应用当地存储。

· title—firefox现在回忽视这个参数,虽然它能够未来会被应用上。而现在最安然的应用要领是传一个空字符串,以防止未来的修改。或允许以传一个杂乱的效果来体现state

· URL—这个参数用来转达新的history实体的URL,重视浏览器将不会在挪用pushState()措施后加载这个URL。但或许会过一会考试考试加载这个URL。好比在用户重启了浏览器后,新的url可以不是相对蹊径。假定是相对蹊径,那么它会相关于现有的url。新的url必须和现有的url同域,否则pushState()将抛出异常。这个参数是选填的,假定为空,则会被置为document以后的url。

某种意义下去说,挪用pushState()措施很像设置了window.location = “#foo”,这二者都邑培植和激活此外一个联系关系到以后document的history实体,但pushState()另外有一些优点:

新的url可以是任何和以后url同域的url,相比之下,假定只设置hash,window.location会保持在统一个document。

假定不须要,你可以不修改url。较量而言,设置window.location = “#foo”;仅发生新的history实体,假定你以后的hash不是#foo

你可以将随便任性的数据与你的新history实体联系关系。应用基于hash的措施,须要将一切相关的数据编码为一个短字符串。

重视,pushState()措施不会使hashchange时间发生,纵然是新旧url只是hash不合。

replaceState()措施

history.replaceState() 用起来很像pushState(),除replaceState()是用来修改以后的history实体而不是培植一个新的。这个措施有时会很有用,当 你须要对某些用户行行动回声而更新一个state工具或许以后history实体时,可以应用它来更新state工具或许以后history实体的url。

popstate事宜

当history实体被改变时,popstate事宜将会发生。假定history实体是有pushState和replaceState措施发生的,popstate事宜的state属性会网罗一份来自history实体的state工具的拷贝

详见window.onpopstate

读取以后的state

读取现有state

当页面加载时,它能够会有一个非空的state工具。这能够发生在当页面设置一个state工具(应用pushState或许replaceState)以后用户重启了浏览器。当页面重新加载,页面将收到onload事宜,但不会有popstate事宜。可是,假定你读取history.state属性,将在popstate事宜发生后取得这个state工具
var currentState = history.state;
Browsers: Tested and Working In

HTML5 Browsers

Chrome 8,9,10
Firefox 4
Safari 5
Opera 11
Safari iOS 4.3
HTML4 Browsers

IE6,7,8,9
Firefox 3
Opera 10
Safari 4
Safari iOS prior to version 4.3

pushState与replaceState差异

history.pushState(state, title, url)

--------------------------------------------------------------------------------

将以后URL和history.state加入到history中,并用新的state和URL替换以后。不会组成页面刷新。

state:与要跳转到的URL对应的状态信息。

title:可以不传

url:要跳转到的URL地址,不克不及跨域。

history.replaceState(state, title, url)

--------------------------------------------------------------------------------

用新的state和URL替换以后。不会组成页面刷新。

state:与要跳转到的URL对应的状态信息。

title:可以不传

url:要跳转到的URL地址,不克不及跨域。

--------------------------------------------------------------------------------

二者看似没有差异,着实差异很年夜的,pushState是添加历史纪录的,而replaceState是不添加的。 php中文网最新课程二维码
  • 相关标签:history.replacestate history.pushstate html5 history
  • 本文原创宣布php中文网 ,转载请注明出处,谢谢您的尊重!
  • 相关文章


  • 若何应用input事宜来监听移动端的输入_html5教程手艺
  • 深刻剖析HTML5 Canvas控制图形矩阵变换的措施_html5教程手艺
  • 实例解说应用SVG制造loading加载动画的措施_html5教程手艺
  • 实例解说应用HTML5 Canvas API操作图形改变的措施_html5教程手艺
  • HTML5 history新特点pushState、replaceState及二者的差异 _html5教程手艺
  • 网友议论

    文明上彀理性语言,请遵守 新闻议论服务协定

    我要议论

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国际最盛行的中文PHP开发框架,也是您Web项目的最好选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架知识泉源,将...

    • 2017-05-16 12:03:57
    • 点击数(173870)

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是天下上最好的编程语言。真的是这样吗?这个梗现实是从哪来的?学会本课程,你就会明确了。 华夏棋牌-万豪棋牌电玩城-微信娱乐棋牌出品的PHP入门系统教授修养视频,完全从初学者的角度出发,绝不玩虚的,一切以适用、有用...

    • 2017-03-20 22:47:17
    • 点击数(170040)

    独孤九贱(1)_HTML5视频教程

    华夏棋牌《php.cn原创html5视频教程》课程特点:php中文网原创滑稽段子系列课程,以恶弄,段子为主题气焰气焰的php视频教程!轻松的教授修养气焰气焰,杂乱的教授修养形式,让同砚们在不知不觉中,学会了HTML知识。 ...

    • 2017-03-13 10:15:11
    • 点击数(137359)

    ThinkPHP5实战之[教授修养治理系统]

    本套教程,以一个真实的黉舍教授修养治理系统为案例,手把手教会您怎样在一张白纸上,从零泉源,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    • 2017-07-24 16:48:56
    • 点击数(130694)

    PHP入门视频教程之一周学会PHP

    一切盘算机语言的学习都要从根原泉源,《PHP入门视频教程之一周学会PHP》不只是PHP的基础部门更主要的是PHP语言的焦点手艺,是学习PHP必须控制的内容,任何PHP项目的完成都离不开这部门的内容,通...

    • 2016-11-16 14:54:14
    • 点击数(130036)

    作者信息

    php中文网

    认证0级讲师

    比来文章

    相关视频教程

  • javascript低级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 相关视频章节