当用户从首页进入帮忙页面时,当用户从首页进入扶助页面时

  HTML5 History
API提供了一种成效,能让开发人员在不刷新整个页面包车型地铁情形下修改站点的U奥德赛L。这几个职能很有用,例如通过一段JavaScript代码局地加载页面包车型大巴剧情,你愿意由此转移方今页面包车型地铁U宝马7系L来反应出页面内容的变更,那时该意义能够派上用场。

  HTML5 History
API提供了一种效应,能让开发人士在不刷新整个页面包车型地铁图景下修改站点的UGL450L。这么些功用很有用,例如通过一段JavaScript代码局地加载页面包车型地铁情节,你指望因而改动近年来页面包车型地铁U瑞鹰L来影响出页面内容的扭转,那时该意义能够派上用场。

  举个例证,当用户从首页进入帮忙页面时,大家通过Ajax来加载援助页面包车型客车剧情。然后那么些用户又转到产品页面,大家须求再三遍通过Ajax请求来替换页面包车型客车内容。当用户想享受页面包车型客车USportageL时,通过History
API,大家得以更改页面包车型大巴U帕杰罗L来影响内容的修改,那样无论是用户享受依旧保留的U揽胜极光L都能和页面包车型地铁剧情对应起来。

  举个例证,当用户从首页进入帮忙页面时,大家通过Ajax来加载支持页面包车型大巴始末。然后那些用户又转到产品页面,我们须求再二遍经过Ajax请求来替换页面包车型客车情节。当用户想享受页面的UKugaL时,通过History
API,大家得以改变页面包车型客车UCR-VL来影响内容的修改,这样无论是用户享受照旧保留的U途达L都能和页面包车型大巴始末对应起来。

基本知识

  要翻开这一个API提供了怎么功能格外不难,打开浏览器的Developer
Tools工具面板,然后在console中输入history。假使您的浏览器支持History
API,你将相会到那个目的下边附带了成都百货上千艺术。

图片 1

  注意个中的pushStatereplaceState那五个章程。大家能够在console中举行部分大概的测试,来看看当大家应用那八个情势时U昂CoraL会发生怎么着变化。稍后我们将分析这多少个方法中的全部参数,今后大家只供给关怀最后叁个参数:

history.replaceState(null, null, 'hello');

  上边代码中的replaceState情势改变了近日页面包车型客车U奥迪Q7L,在背后添加了三个’/hello’。可是并不曾生出任何request请求,当前窗口依旧停留在前面包车型客车页面。可是那里有个难点,当你点击浏览器的滞后按钮时,页面并不会回退到大家由此replaceState措施修改以前的不胜U奥迪Q7L,而是径直回退到了上3个页面(即大家进去到那么些页面此前的丰富页面)。那是因为replaceState主意不会修改浏览器的history,它只是简短地更迭了地址栏中的U揽胜L。

  要消除这么些标题大家须要利用pushState方法:

history.pushState(null, null, 'hello');

  今后再点击浏览器的落后按钮,你会意识它和您预想的效果同样。因为pushState措施将我们传给它的U本田UR-VL添加到浏览器的history中,从而改变了浏览器的history。就算咱们将其它一个完完全全的站点U昂科拉L传递给它会时有爆发什么动静呢?例如大家在baidu.com的首页举办测试,然后在console中输入上面包车型大巴内容。

history.pushState(null, null, 'https://twitter.com/hello');

  浏览器会报错。因为传递给pushState方法的U牧马人l必须和日前页面包车型地铁U福特ExplorerL属于同3个源(即不可能跨域),不然会有十分大的安全漏洞,开发职员或然会借用该意义来避人耳目用户,让她们以为本人是在做客二个一心两样的站点,而真相并非如此。

  来探望传递给pushState艺术的装有参数:

history.pushState([data], [title], [url]);
  1. 第③个参数用来传递我们须求的多少,当页面包车型客车气象产生变化时大家能够吸收到该数量。如用户点击浏览器的滑坡和前进按钮。要求小心的是在Firefox中只允许传递最多640K的数目。
  2. 第1个参数title是多个字符串,不过停止到当下,大致全部的浏览器都忽视该参数。
  3. 最后3个参数是大家想要替换的U奥德赛L。

基本知识

  要翻看这么些API提供了怎么样功能相当简单,打开浏览器的Developer
Tools工具面板,然后在console中输入history。如若你的浏览器协助History
API,你将会看到那一个指标上边附带了众多措施。

图片 2

  注意其中的pushStatereplaceState这多少个办法。大家能够在console中实行部分简练的测试,来看望当大家应用那七个章程时UMuranoL会发生哪些变化。稍后我们将分析那七个措施中的全部参数,以往大家只需求关爱最终3个参数:

history.replaceState(null, null, 'hello');

  下面代码中的replaceState办法改变了近日页面包车型客车URAV4L,在前边添加了贰个’/hello’。然则并从未发出任何request请求,当前窗口仍然停留在前头的页面。但是这里有个难点,当您点击浏览器的滞后按钮时,页面并不会回退到大家由此replaceState情势修改此前的可怜U纳瓦拉L,而是径直回退到了上3个页面(即大家进去到那一个页面从前的格外页面)。这是因为replaceState方法不会修改浏览器的history,它只是简短地更迭了地址栏中的U福睿斯L。

  要缓解那么些题材大家供给使用pushState方法:

history.pushState(null, null, 'hello');

  未来再点击浏览器的倒退按钮,你会意识它和你预想的法力一样。因为pushState方式将大家传给它的U本田CR-VL添加到浏览器的history中,从而改变了浏览器的history。固然大家将此外3个完完全全的站点UGL450L传递给它会时有发生什么样动静吗?例如大家在baidu.com的首页进行测试,然后在console中输入上边包车型大巴始末。

history.pushState(null, null, 'https://twitter.com/hello');

  浏览器会报错。因为传递给pushState措施的U奇骏l必须和当前页面的UKugaL属于同贰个源(即无法跨域),不然会有非常的大的安全漏洞,开发职员也许会借用该意义来招摇撞骗用户,让她们觉得自身是在拜访3个全然两样的站点,而实际并非如此。

  来看望传递给pushState措施的具有参数:

history.pushState([data], [title], [url]);
  1. 先是个参数用来传递大家供给的多寡,当页面包车型的士图景发生变化时我们得以吸收接纳到该多少。如用户点击浏览器的滞后和前进按钮。供给专注的是在Firefox中只允许传递最多640K的数码。
  2. 第①个参数title是3个字符串,然而甘休到日前,大概全数的浏览器都忽视该参数。
  3. 最后三个参数是大家想要替换的ULacrosseL。

粗略回看一下

  那么些History
API最珍视的功力就是不重复加载页面。现在咱们不得不通过变更window.location的值来修改当前页面的U帕杰罗L,然则那会促成整个页面被再次加载。假如您改改的只是U福特ExplorerL中的hash,则不会导致页面被刷新。 

  使用旧的hashbang措施能够更改页面包车型大巴U汉兰达L而不刷新页面。有名的Instagram正是使用的该方法,可是也广受诟病,毕竟hash在location中并不被看做二个当真的资源来相比。

  作为History
API的早期帮衬者,推文(Tweet)后来撇下了古板的hashbang办法。在贰零壹壹年,推特(TWTR.US)的公司介绍了她们的新方法,并列出了里面包车型大巴有的题材同时还详细地介绍了各浏览器应该怎么兑现该专业。

简单来讲回看一下

  那么些History
API最重庆大学的效应便是不重复加载页面。以往大家只可以通过变更window.location的值来修改当前页面包车型客车U奇骏L,但是那会促成整个页面被再一次加载。假设您改改的只是USportageL中的hash,则不会导致页面被刷新。 

  使用旧的hashbang办法能够变动页面的U宝马7系L而不刷新页面。出名的推特(Twitter)正是使用的该格局,不过也广受诟病,毕竟hash在location中并不被用作二个实在的能源来对待。

  作为History
API的初期帮助者,推文(Tweet)后来撇下了价值观的hashbang措施。在二〇一三年,Facebook的团队介绍了她们的新方法,并列出了在那之中的片段难题同时还详细地介绍了各浏览器应该怎么兑现该标准。

二个应用pushState和Ajax的例子

https://css-tricks.com/examples/State/

  在该示例中,大家盼望用户通过我们的网站找到电影捉鬼敢死队(一部花旗国电影)中的艺人。当用户挑选三个图片时,大家供给在江湖呈现该艺人对应的文字描述,同时给该图形贰个被入选的功效。当点击后退按钮时,页面应该切换来上2个被入选的图片状态,同时图片下方的文字也要一并切换。当点击前进按钮时也如出一辙。

  这里有1个效率图:

图片 3

  这一个示例的HTML代码万分简单:div.gallery中含有了颇具的链接,每一个链接里有三个图形。接下来大家放置了七个空的div.content,用来存放当歌星图片被点击时体现在下放的文字。

<div class="gallery">
  <a href="https://cdn.css-tricks.com/peter.html">
    <img src="bill.png" alt="Peter" class="peter" data-name="peter">
  </a>
  <a href="https://cdn.css-tricks.com/ray.html">
    <img src="ray.png" alt="Ray" class="ray" data-name="ray">
  </a>
  <a href="https://cdn.css-tricks.com/egon.html">
    <img src="egon.png" alt="Egon" class="egon" data-name="egon">
  </a>
  <a href="https://cdn.css-tricks.com/winston.html">
    <img src="winston.png" alt="Winston" class="winston" data-name="winston">
  </a>
</div>

<p class="selected">Ghostbusters</p>
<p class="highlight"></p>

<div class="content"></div>

  若是没有JavaScript该页面照旧能够健康干活,点击图片能够跳转到对应的页面,然后点击后退按钮也得以回来在此以前的页面。那是为着考虑页面包车型客车可访问行和优雅降级。

  接下去我们要添加JavaScript代码了。大家通过event
propagation
给div.gallery成分中的每2个link添加3个事件处理程序,像那样:

var container = document.querySelector('.gallery');

container.addEventListener('click', function(e) {
  if (e.target != e.currentTarget) {
    e.preventDefault();
    // e.target is the image inside the link we just clicked.
  }
  e.stopPropagation();
}, false);

  在if语句中,我们获取到被选中图片的data-name属性的值,然后将’.html’添加到前面拼成二个要访问的页面地址,并将其视作第一个参数字传送递给pushState形式(可是在实事求是的事例中大家兴许会在Ajax请求成功之后才会去修改U大切诺基L)。

var data = e.target.getAttribute('data-name'),
url = data + ".html";
history.pushState(null, null, url);

// 此处更改当前的classes样式
// 然后使用data变量的值更新
// 并通过Ajax请求.content元素的内容
// 最后再更新当前文档的title

(当然,此处我们也足以向来动用link的href属性的值)

  小编将真正代码中的内容都替换来注释了,这样大家得以只关注pushState方法的使用。

  今后咱们点击图片,ULANDL和Ajax请求的内容会被自动更新,可是当大家点击后退按钮时并不会回退到前面入选的扮演者图片。那里大家还亟需在用户点击后退和前进按钮时利用其它三个Ajax请求来更新内容,并再二回选取pushState主意来更新页面包车型客车U福特ExplorerL。

  大家采纳pushState办法中的第一个参数(在那之中的state)来保存意况信息:

history.pushState(data, null, url);

  上边代码中的data参数在popstate事件触发时能够被获取到。当浏览器的退化和前进按钮被点击时会触发popstate事件。

window.addEventListener('popstate', function(e) {
  // e.state表示上一个被点击的图片的data-attribute
});

  大家能够透过该参数字传送递一些大家须求的音讯,例如在该示例中大家将事先入选的捉鬼敢死队的表演者作为参数字传送递给requestContent方法,在该方法中,我们应用jQuery的load方法开始展览贰回Ajax请求。

function requestContent(file) {
  $('.content').load(file + ' .content');
}

window.addEventListener('popstate', function(e) {
  var character = e.state;

  if (character == null) {
    removeCurrentClass();
    textWrapper.innerHTML = " ";
    content.innerHTML = " ";
    document.title = defaultTitle;
  } else {
      updateText(character);
      requestContent(character + ".html");
      addCurrentClass(character);
      document.title = "Ghostbuster | " + character;
  }
});

  假若用户点击了歌唱家Ray的图样,event
listener会被触发,然后在pushState事件中保留图片的data属性的值。当用户点击此外2个图片,并点击了浏览器的向下按钮,此时popstate事件会被触发,从而再次加载ray.html页面。

  那象征什么样吗?当我们点击三个艺人的图样然后将被更改的UCRUISERL分享出来,用户访问这么些U昂CoraL时对应的HTML文件会被活动加载进来。那会拉动一些更好的用户体验,并保障了U凯雷德L和页面内容的一致性从而减弱了为此而带给用户的一对嫌疑。

  上边的演示只是简短地经过jQuery来动态加载内容,我们本来也足以在pushState方法中传递一些一发错综复杂的指标。但是这一个事例已经能充足表达难题并赞助大家初叶攻读怎样利用History
API的效益。我们先要学会走,然后才能跑。

二个用到pushState和Ajax的事例

https://css-tricks.com/examples/State/

  在该示例中,大家期望用户通过大家的网站找到电影捉鬼敢死队(一部美利坚合众国影视)中的艺人。当用户采纳八个图形时,大家要求在人间展现该歌星对应的文字描述,同时给该图形三个被入选的功用。当点击后退按钮时,页面应该切换成上四个被选中的图形状态,同时图片下方的文字也要一并切换。当点击前进按钮时也同样。

  那里有一个效果图:

图片 4

  这么些示例的HTML代码十三分不难:div.gallery中涵盖了拥有的链接,各类链接里有一个图片。接下来大家放置了多个空的div.content,用来存放在当影星图片被点击时呈现在下放的文字。

<div class="gallery">
  <a href="https://cdn.css-tricks.com/peter.html">
    <img src="bill.png" alt="Peter" class="peter" data-name="peter">
  </a>
  <a href="https://cdn.css-tricks.com/ray.html">
    <img src="ray.png" alt="Ray" class="ray" data-name="ray">
  </a>
  <a href="https://cdn.css-tricks.com/egon.html">
    <img src="egon.png" alt="Egon" class="egon" data-name="egon">
  </a>
  <a href="https://cdn.css-tricks.com/winston.html">
    <img src="winston.png" alt="Winston" class="winston" data-name="winston">
  </a>
</div>

<p class="selected">Ghostbusters</p>
<p class="highlight"></p>

<div class="content"></div>

  假如没有JavaScript该页面如故可以健康办事,点击图片能够跳转到对应的页面,然后点击后退按钮也能够回到在此以前的页面。那是为着考虑页面包车型地铁可访问行和淡雅降级。

  接下去我们要添加JavaScript代码了。我们经过event
propagation
给div.gallery成分中的每3个link添加2个事件处理程序,像这么:

var container = document.querySelector('.gallery');

container.addEventListener('click', function(e) {
  if (e.target != e.currentTarget) {
    e.preventDefault();
    // e.target is the image inside the link we just clicked.
  }
  e.stopPropagation();
}, false);

  在if语句中,大家取得到被入选图片的data-name属性的值,然后将’.html’添加到前边拼成1个要访问的页面地址,并将其看作第五个参数字传送递给pushState方法(可是在真实的例子中大家或者会在Ajax请求成功今后才会去修改U陆风X8L)。

var data = e.target.getAttribute('data-name'),
url = data + ".html";
history.pushState(null, null, url);

// 此处更改当前的classes样式
// 然后使用data变量的值更新
// 并通过Ajax请求.content元素的内容
// 最后再更新当前文档的title

(当然,此处大家也足以间接使用link的href属性的值)

  笔者将真实代码中的内容都替换到注释了,那样大家能够只关怀pushState办法的运用。

  以后我们点击图片,U哈弗L和Ajax请求的内容会被自动更新,可是当大家点击后退按钮时并不会回退到事先入选的歌手图片。那里大家还须求在用户点击后退和前进按钮时行使此外3个Ajax请求来更新内容,并再三回选取pushState措施来更新页面包车型地铁UCRUISERL。

  我们选用pushState主意中的第一个参数(个中的state)来保存意况新闻:

history.pushState(data, null, url);

  上边代码中的data参数在popstate事件触发时能够被获取到。当浏览器的向下和前进按钮被点击时会触发popstate事件。

window.addEventListener('popstate', function(e) {
  // e.state表示上一个被点击的图片的data-attribute
});

  我们得以因此该参数字传送递一些大家须要的新闻,例如在该示例中我们将事先入选的捉鬼敢死队的歌唱家作为参数字传送递给requestContent办法,在该办法中,大家应用jQuery的load方法进行2回Ajax请求。

function requestContent(file) {
  $('.content').load(file + ' .content');
}

window.addEventListener('popstate', function(e) {
  var character = e.state;

  if (character == null) {
    removeCurrentClass();
    textWrapper.innerHTML = " ";
    content.innerHTML = " ";
    document.title = defaultTitle;
  } else {
      updateText(character);
      requestContent(character + ".html");
      addCurrentClass(character);
      document.title = "Ghostbuster | " + character;
  }
});

  假设用户点击了歌星Ray的图片,event
listener会被触发,然后在pushState事件中保留图片的data属性的值。当用户点击此外三个图片,并点击了浏览器的后退按钮,此时popstate事件会被触发,从而再次加载ray.html页面。

  那意味着什么样吗?当大家点击五个歌手的图样然后将被更改的UPAJEROL分享出来,用户访问这几个USportageL时对应的HTML文件会被活动加载进来。这会拉动一些更好的用户体验,并保险了UCRUISERL和页面内容的一致性从而缩小了为此而带给用户的有的怀疑。

  上边的演示只是简单地由此jQuery来动态加载内容,大家当然也能够在pushState办法中传送一些更为扑朔迷离的靶子。不过这么些例子已经能充足表明难题并支持大家开首学习怎么着采纳History
API的效果。大家先要学会走,然后才能跑。

下一步

  假如大家想大范围地选择那种技术,大家理应考虑使用一些专有的工具,例如pjax 它是3个jQuery的插件,使用它可以大大提升大家还要使用Ajax和pushState格局开始展览开发的进程,然则它只帮衬这个使用History
API接口的现代浏览器。

  History
JS
能够兼容旧浏览器,对于不帮衬History
API接口的浏览器,它依旧选择旧的U大切诺基L hash的不二法门来实现均等的作用。

下一步

  假如大家想大范围地应用那种技能,大家应该考虑选拔一些专有的工具,例如pjax 它是多少个jQuery的插件,使用它能够大大进步大家还要接纳Ajax和pushState主意进行付出的快慢,可是它只援救那个运用History
API接口的现代浏览器。

  History
JS
能够包容旧浏览器,对于不协理History
API接口的浏览器,它依旧选择旧的U福睿斯L hash的方法来达成均等的职能。

有关URLs

  那里笔者越发引述了凯尔 Neath有关U途睿欧Ls的验证:

U逍客Ls是三个通用的定义,它能够干活在Firefox, Chrome, Safari, Internet
Explorer, curl, wget,甚至在你的金立,
Android以及便签纸上。它是web中的贰个通用的语法。不要认为那是当然的。任何贰个稍微懂点技术的用户都得以浏览你的行使的百分之九十上述的一对而不用去刻意记住那1个U驭胜L的布局。要完毕如此的效劳,你须求考虑U昂CoraLs的实用性。

  那代表不管你想要进行什么样的hacks或性质优化,作为web开发人士,你应当爱慕U路虎极光L。而随着HTML5
History API的扶助,我们能够轻松地化解诸如上述示范中的一些题材。

有关URLs

  那里小编尤其引述了凯尔 Neath有关U奥迪Q7Ls的阐明:

U奥迪Q5Ls是二个通用的定义,它能够干活在Firefox, Chrome, Safari, Internet
Explorer, curl, wget,甚至在你的Nokia,
Android以及便签纸上。它是web中的一个通用的语法。不要认为那是本来的。任何三个稍微懂点技术的用户都得以浏览你的接纳的十分之九上述的片段而不用去刻意记住那二个UHighlanderL的构造。要完结如此的功能,你要求考虑U揽胜Ls的实用性。

  那代表不管你想要举办什么的hacks或性质优化,作为web开发职员,你应当注重U卡宴L。而随着HTML5
History API的帮手,大家可以轻松地化解诸如上述示范中的一些标题。

大规模难题

  • 将Ajax请求的地址嵌入到a标记的href属性中一般是个不错的主张。
  • 担保在JavaScript的click事件处理程序中return
    true,那样当有人使用中键点击或指令点击时不会造成程序被意外覆盖。

广大难题

  • 将Ajax请求的地址嵌入到a标记的href属性中不乏先例是个不错的呼吁。
  • 保障在JavaScript的click事件处理程序中return
    true,那样当有人使用中键点击或指令点击时不会促成程序被意外覆盖。

补充

补充

浏览器支持

Chrome Safari Firefox Opera IE Android iOS
31+ 7.1+ 34+ 11.50+ 10+ 4.3+ 7.1+

原稿地址:https://css-tricks.com/using-the-html5-history-api/

浏览器支持

Chrome Safari Firefox Opera IE Android iOS
31+ 7.1+ 34+ 11.50+ 10+ 4.3+ 7.1+

原稿地址:https://css-tricks.com/using-the-html5-history-api/

相关文章