当用户想享受页面的URL时。当用户想分享页面的URL时。

  HTML5 History
API提供了平等种力量,能为开发人员在匪刷新整个页面的景下修改站点的URL。这个职能很有因此,例如通过平等截JavaScript代码局部加载页面的内容,你盼经过变更目前页面的URL来反应有页面内容之变更,这时该意义可派上用场。

  HTML5 History
API提供了平等种效应,能叫开发人员在未刷新整个页面的情形下修改站点的URL。这个效应异常有因此,例如通过平等段子JavaScript代码局部加载页面的内容,你希望通过反目前页面的URL来影响有页面内容的转变,这时该意义可派上用场。

  举个例子,当用户从首页上帮助页面时,我们经过Ajax来加载帮助页面的情。然后这个用户同时改成至活页面,我们得还同差通过Ajax请求来替换页面的情节。当用户想享受页面的URL时,通过History
API,我们好更改页面的URL来反应内容的改动,这样不管是用户分享要封存的URL都能够同页面的始末对应起来。

  举个例证,当用户从首页上帮助页面时,我们经过Ajax来加载帮助页面的情。然后是用户以改至产品页面,我们需要重新同不成通过Ajax请求来替换页面的情。当用户想享受页面的URL时,通过History
API,我们可以变动页面的URL来反应内容之修改,这样不管是用户享受要封存的URL都能跟页面的内容对应起来。

基本知识

  要查此API提供了安职能非常简单,打开浏览器的Developer
Tools工具面板,然后以console中输入history。如果你的浏览器支持History
API,你将会晤看到是目标下附带了过多计。

图片 1

  注意其中的pushStatereplaceState立刻片单道。我们得以在console中开展有简约的测试,来探视当我们使用即时点儿个方式时URL会发生什么变化。稍后我们以分析这片只法子中的有所参数,现在我们只有待关注最终一个参数:

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

  上面代码中之replaceState计改变了目前页面的URL,在后面加加了一个’/hello’。不过并没发生任何request请求,当前窗口依然留于前头的页面。不过这里来只问题,当您点击浏览器的退化按钮时,页面并无会见回退到我们由此replaceState道修改前的不得了URL,而是径直回退到了高达一个页面(即我们登及这个页面之前的好页面)。这是为replaceState方法不见面窜浏览器的history,它只是简单地更迭了地址栏中之URL。

  要缓解这个题材我们用以pushState方法:

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

  现在重新点击浏览器的落后按钮,你见面发觉她同公预想的功用一样。因为pushState方式以我们传给它的URL添加至浏览器的history中,从而改变了浏览器的history。假如我们将另外一个完整的站点URL传递给她会生啊状况为?例如我们当baidu.com的首页进行测试,然后以console中输入下面的情节。

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

  浏览器会报错。因为传递让pushState方法的URl必须同脚下页面的URL属于同一个来(即无可知跨域),否则会生出格外充分之安全漏洞,开发人员可能会见借该功能来掩人耳目用户,让他俩当好是当看一个完全两样之站点,而实并非如此。

  来探视传递让pushState艺术的享有参数:

history.pushState([data], [title], [url]);
  1. 首先单参数用来传递我们要之多少,当页面的状态发生变化时我们好接到拖欠数据。如用户点击浏览器的落后和上按钮。需要留意的是当Firefox中只允许传递最多640K的数码。
  2. 仲单参数title是一个字符串,不过了到即,几乎拥有的浏览器都忽略该参数。
  3. 末尾一个参数是咱们怀念使替换的URL。

基本知识

  要翻看此API提供了如何职能非常简单,打开浏览器的Developer
Tools工具面板,然后于console中输入history。如果你的浏览器支持History
API,你用会见视此目标下附带了好多艺术。

图片 2

  注意其中的pushStatereplaceState马上有限独办法。我们好以console中进行一些简易的测试,来探当我们用这半只章程时URL会发生什么变化。稍后我们将分析这有限个措施中的装有参数,现在咱们无非待关怀最终一个参数:

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

  上面代码中之replaceState术改变了即页面的URL,在后边加加了一个’/hello’。不过并没有有任何request请求,当前窗口仍停留在之前的页面。不过这里发出只问题,当您点击浏览器的退化按钮时,页面并无见面回退到我们经过replaceState措施修改前的不行URL,而是一直回退到了达一个页面(即我们进入到此页面之前的好页面)。这是盖replaceState道不见面改浏览器的history,它只是略地更迭了地方栏中的URL。

  要缓解者题材我们用以pushState方法:

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

  现在还点击浏览器的落后按钮,你见面发觉她同你预想的效应一样。因为pushState计以我们传给它的URL添加至浏览器的history中,从而改变了浏览器的history。假如我们将另外一个完的站点URL传递让她会产生啊状态为?例如我们当baidu.com的首页进行测试,然后于console中输入下面的内容。

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

  浏览器会报错。因为传递让pushState措施的URl必须同当前页面的URL属于同一个出自(即无可知跨域),否则会发生甚非常之安全漏洞,开发人员可能会见借该功能来掩人耳目用户,让他俩以为好是当看一个了两样之站点,而实际并非如此。

  来瞧传递给pushState道的具有参数:

history.pushState([data], [title], [url]);
  1. 首先单参数用来传递我们要之多寡,当页面的状态发生变化时我们可以接收到拖欠数量。如用户点击浏览器的落伍和前进按钮。需要小心的是以Firefox中只是允许传递最多640K的多少。
  2. 其次独参数title是一个字符串,不过了到目前,几乎有的浏览器都忽略该参数。
  3. 末一个参数是我们想只要替换的URL。

粗略回顾一下

  这些History
API最要紧的功效就是是休更加载页面。以往咱们只好通过反window.location的价值来改时页面的URL,不过这会导致整页面被再度加载。如果你改改的仅仅是URL中之hash,则未见面促成页面被刷新。 

  使用原的hashbang道可以变更页面的URL而未刷新页面。著名的Twitter就是使用的拖欠方式,不过呢广受诟病,毕竟hash在location中连无受作一个实在的资源来对比。

  作为History
API的早期支持者,Twitter后来撇下了传统的hashbang术。在2012年,Twitter的团队介绍了他们的新方法,并列出了间的一些问题同时还详细地介绍了每浏览器应该什么落实该标准。

简短回顾一下

  这些History
API最要害的功能就是是匪还加载页面。以往咱们只能通过改动window.location的价来窜时页面的URL,不过这会招致整个页面被重复加载。如果您改改的单是URL中的hash,则未见面造成页面被刷新。 

  使用原来的hashbang方可以转移页面的URL而未刷新页面。著名的Twitter就是使用的拖欠方式,不过呢广受诟病,毕竟hash在location中连无吃当一个确的资源来比。

  作为History
API的早期支持者,Twitter后来撇下了传统的hashbang方法。在2012年,Twitter的团伙介绍了他们的新方法,并列出了里的局部题材同时还详细地介绍了各个浏览器应该怎么兑现该专业。

一个下pushState和Ajax的例子

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

  以该示例中,我们愿意用户通过我们的网站找到电影捉鬼敢死队(一统美国影片)中之扮演者。当用户选择一个图时,我们需要在江湖显示该演员对应之文字描述,同时于该图片一个给选中的功效。当点击后下降按钮时,页面应该切换至直达一个被入选的图片状态,同时图片下方的文吗只要一如既往连切换。当点击前进按钮时也一样。

  这里出一个效能图:

图片 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元素中之诸一个link添加一个事件处理程序,像这样:

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请求成功以后才会错过修改URL)。

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

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

(当然,此处我们吧得一直运用link的href属性的价)

  我将真正代码中的内容还替换成注释了,这样咱们可以就关心pushState方法的使用。

  现在咱们点击图片,URL和Ajax请求的情会受自动更新,但是当我们点击后降仍钮时连无见面回退到事先入选的饰演者图片。这里我们还欲在用户点击后下降以及升华按钮时行使另外一个Ajax请求来更新内容,并再次同涂鸦以pushState办法来更新页面的URL。

  我们运用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属性的价。当用户点击另外一个图片,并点击了浏览器的向下按钮,此时popstate事件会叫点,从而又加载ray.html页面。

  这意味着什么为?当我们点击一个艺人的图形然后将吃再次改的URL分享出来,用户访问这URL时对应的HTML文件会让机关加载进来。这会带动一些再度好的用户体验,并保证了URL和页面内容之一致性从而减少了于是如果带来为用户之一些困惑。

  上面的以身作则只是简单地经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元素中的各个一个link添加一个事件处理程序,像这么:

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请求成功后才会失去修改URL)。

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

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

(当然,此处我们呢得以一直利用link的href属性的值)

  我将真正代码中的内容还替换成注释了,这样咱们可独自关心pushState方的下。

  现在咱们点击图片,URL和Ajax请求的情会为自动更新,但是当我们点击后降落仍钮时连无见面回退到前入选的艺人图片。这里我们还索要在用户点击后回落和前进按钮时使用另外一个Ajax请求来更新内容,并还同糟采用pushState法来更新页面的URL。

  我们应用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属性的价。当用户点击另外一个图形,并点击了浏览器的退化按钮,此时popstate事件会为硌,从而再次加载ray.html页面。

  这表示什么吗?当我们点击一个演员的图片然后用受另行改的URL分享下,用户访问是URL时对应之HTML文件会为自动加载进来。这会带有再度好之用户体验,并确保了URL和页面内容的一致性从而减少了为此若带吃用户的一些迷惑。

  上面的言传身教只是简短地经jQuery来动态加载内容,我们本来为可以在pushState法中传递一些越复杂的对象。不过此事例已经能足够说明问题并支援我们初步上学怎么运用History
API的机能。我们先要学会走,然后才会走。

下一步

  如果我们纪念大范围地以这种技术,我们相应考虑采取一些专有的家伙,例如pjax。 它是一个jQuery的插件,使用她好大大提高我们以用Ajax和pushState道开展开之速度,不过它仅仅支持那些以History
API接口的现世浏览器。

  History
JS
可配合旧浏览器,对于未支持History
API接口的浏览器,它依旧采用原来的URL hash的方法来兑现平等的法力。

下一步

  如果我们怀念死范围地使这种技术,我们当考虑使用有专有的工具,例如pjax。 它是一个jQuery的插件,使用它好大大提高我们又以Ajax和pushState方式进行开发的进度,不过它们就支持那些运用History
API接口的现世浏览器。

  History
JS
好匹配旧浏览器,对于无支持History
API接口的浏览器,它还是采取原的URL hash的方法来实现同的效益。

有关URLs

  这里自己专门引用了Kyle Neath有关URLs的证明:

URLs是一个通用的概念,它可干活以Firefox, Chrome, Safari, Internet
Explorer, curl, wget,甚至于你的iPhone,
Android以及虽签纸上。它是web中之一个通用的语法。不要觉得当下是当的。任何一个稍微懂点技术之用户都足以浏览你的施用的90%上述之一些要不用去刻意记住那些URL的结构。要贯彻如此的效应,你用考虑URLs的实用性。

  这意味无论你想要进行什么的hacks或性质优化,作为web开发人员,你当强调URL。而随着HTML5
History API的赞助,我们可轻松地化解诸如上述示范中之一对问题。

有关URLs

  这里我特意引述了Kyle Neath有关URLs的求证:

URLs是一个通用的定义,它可干活在Firefox, Chrome, Safari, Internet
Explorer, curl, wget,甚至当您的iPhone,
Android以及虽签纸上。它是web中的一个通用的语法。不要觉得就是理所当然的。任何一个稍微懂点技术的用户还足以浏览你的应用之90%以上的有些如不用失去刻意记住那些URL的构造。要兑现这样的功能,你用考虑URLs的实用性。

  这意味不管你想使开展哪些的hacks或性能优化,作为web开发人员,你当重视URL。而趁HTML5
History API的扶助,我们可轻松地化解诸如上述示范中的部分题材。

普遍问题

  • 以Ajax请求的地方嵌入至a标记的href属性中一般是独正确的呼吁。
  • 管教以JavaScript的click事件处理程序中return
    true,这样当有人利用中键点击或指令点击时未见面促成程序为飞覆盖。

大面积问题

  • 以Ajax请求的地址嵌入至a标记的href属性中日常是独是的呼吁。
  • 管教于JavaScript的click事件处理程序中return
    true,这样当有人利用中键点击或指令点击时未见面招致程序让飞覆盖。

补充

  • Mozilla有关操作浏览器history的文档
  • Ajax示例集锦Dive into
    HTML5
  • Twitter有关pushState的实现

补充

  • Mozilla有关操作浏览器history的文档
  • Ajax示例集锦Dive into
    HTML5
  • Twitter有关pushState的实现

浏览器支持

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/

相关文章