HTML5 History
API提供了一种效应,能让开发职员在不刷新整个页面包车型客车情事下修改站点的UPAJEROL。那些效率很有用,例如通过一段JavaScript代码局地加载页面的始末,你期望由此改动近期页面包车型客车UQashqaiL来反应出页面内容的转变,那时该意义能够派上用场。

  举个例证,当用户从首页进入协助页面时,大家通过Ajax来加载扶助页面包车型大巴始末。然后这一个用户又转到产品页面,大家要求再贰回通过Ajax请求来替换页面包车型客车剧情。当用户想分享页面的U本田CR-VL时,通过History
API,大家能够改变页面包车型地铁U大切诺基L来影响内容的改动,那样无论是用户享受依然封存的UTucsonL都能和页面包车型客车始末对应起来。

基本知识

  要翻开这么些API提供了什么功用非凡简单,打开浏览器的Developer
Tools工具面板,然后在console中输入history。假使您的浏览器援救History
API,你将会师到这几个目的上面附带了广大艺术。

图片 1

  注意个中的pushStatereplaceState那八个章程。大家能够在console中实香港行政局部差不多的测试,来看看当大家利用这多个格局时UCRUISERL会产生怎么样变动。稍后我们将分析那三个法子中的全数参数,未来大家只需求关爱最终三个参数:

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

  上边代码中的replaceState措施改变了当下页面包车型大巴UEscortL,在后头添加了2个’/hello’。但是并从未生出任何request请求,当前窗口还是停留在事先的页面。然而那里有个难题,当你点击浏览器的退化按钮时,页面并不会回退到我们由此replaceState主意修改从前的可怜U瑞虎L,而是平昔回退到了上1个页面(即我们进来到那些页面在此以前的相当页面)。那是因为replaceState主意不会修改浏览器的history,它只是简短地更迭了地址栏中的UEscortL。

  要消除那几个标题大家必要接纳pushState方法:

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

  以后再点击浏览器的落后按钮,你会发觉它和您预想的效果一样。因为pushState方式将大家传给它的U哈弗L添加到浏览器的history中,从而改变了浏览器的history。固然大家将别的多个完好无损的站点URubiconL传递给它会产生如何景况吗?例如大家在baidu.com的首页举办测试,然后在console中输入上边包车型地铁始末。

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

  浏览器会报错。因为传递给pushState艺术的U凯雷德l必须和近期页面包车型大巴U昂科威L属于同一个源(即不可能跨域),不然会有相当的大的安全漏洞,开发职员恐怕会借用该意义来偷天换日用户,让她们觉得自个儿是在做客3个一心两样的站点,而实际并非如此。

  来看看传递给pushState主意的有着参数:

history.pushState([data], [title], [url]);
  1. 率先个参数用来传递大家供给的数额,当页面包车型大巴动静爆发变化时大家得以收起到该数据。如用户点击浏览器的落后和前进按钮。必要留意的是在Firefox中只同意传递最多640K的数量。
  2. 其次个参数title是八个字符串,然则结束到如今,大约全数的浏览器都忽略该参数。
  3. 最后贰个参数是大家想要替换的UCRUISERL。

回顾回顾一下

  那几个History
API最根本的功能便是不另行加载页面。今后大家不得不通过改动window.location的值来修改当前页面包车型客车UOdysseyL,不过那会导致整个页面被重新加载。借使您改改的只是ULacrosseL中的hash,则不会招致页面被刷新。 

  使用旧的hashbang办法能够变更页面包车型大巴U帕杰罗L而不刷新页面。著名的Facebook正是使用的该措施,然则也广受诟病,毕竟hash在location中并不被看成二个真的的能源来相比。

  作为History
API的早先时代支持者,推文(Tweet)后来撇下了价值观的hashbang办法。在二零一三年,照片墙的集体介绍了他们的新方法,并列出了中间的有个别难点还要还详细地介绍了各浏览器应该怎么兑现该标准。

3个行使pushState和Ajax的例子

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

  在该示例中,大家意在用户通过我们的网站找到电影捉鬼敢死队(一部美利哥影片)中的歌手。当用户选取3个图纸时,我们须要在下方呈现该歌星对应的文字描述,同时给该图形四个被入选的效应。当点击后退按钮时,页面应该切换来上2个被入选的图形状态,同时图片下方的文字也要一并切换。当点击前进按钮时也如出一辙。

  那里有两个意义图:

图片 2

  这一个示例的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成分中的每三个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’添加到后边拼成贰个要拜访的页面地址,并将其看作第多个参数字传送递给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艺术的利用。

  未来我们点击图片,U凯雷德L和Ajax请求的内容会被自动更新,不过当大家点击后退按钮时并不会回退到从前入选的歌星图片。那里大家还要求在用户点击后退和提升按钮时选择其余一个Ajax请求来更新内容,并再贰遍使用pushState方法来更新页面的U安德拉L。

  大家利用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属性的值。当用户点击别的1个图片,并点击了浏览器的倒退按钮,此时popstate事件会被触发,从而再度加载ray.html页面。

  那代表什么呢?当大家点击三个歌唱家的图片然后将被更改的U翼虎L分享出来,用户访问这么些U揽胜极光L时对应的HTML文件会被自动加载进来。那会推动一些更好的用户体验,并确认保障了UKugaL和页面内容的一致性从而收缩了所以而带给用户的局地思疑。

  上面的演示只是简短地通过jQuery来动态加载内容,我们当然也得以在pushState艺术中传递一些进一步扑朔迷离的靶子。可是这几个例子已经能丰裕表达难题并扶持大家发轫攻读怎样运用History
API的功力。我们先要学会走,然后才能跑。

下一步

  若是我们想大范围地行使那种技能,大家相应考虑采取部分专有的工具,例如pjax 它是一个jQuery的插件,使用它能够大大升高我们同时接纳Ajax和pushState主意开始展览支付的速度,可是它只援救那二个使用History
API接口的当代浏览器。

  History
JS
能够合营旧浏览器,对于不帮衬History
API接口的浏览器,它还是采纳旧的UHighlanderL hash的办法来落到实处平等的作用。

有关URLs

  那里小编特意引用了凯尔 Neath有关ULX570Ls的表达:

UPAJEROLs是1个通用的概念,它能够干活在Firefox, Chrome, Safari, Internet
Explorer, curl, wget,甚至在您的HTC,
Android以及便签纸上。它是web中的3个通用的语法。不要以为那是自然的。任何三个稍微懂点技术的用户都足以浏览你的利用的9/10以上的片段而不用去刻意记住那么些U劲客L的结构。要促成如此的效率,你须要考虑U普拉多Ls的实用性。

  那代表无论你想要实行什么样的hacks或质量优化,作为web开发人士,你应当体贴U瑞鹰L。而随着HTML5
History API的援救,大家得以轻松地缓解诸如上述示范中的一些题材。

普遍难题

  • 将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/

相关文章

网站地图xml地图