html5历史记录API的使用 方法 ，在线实例演示html5历史记录API如何使用、浏览器的兼容性、语法定义及它的 属性 值详细资料等。
HTML5历史记录API使您可以通过JavaScript访问浏览器导航历史记录。HTML5历史记录API在单页Web应用程序中非常有用。单页Web应用程序可以使用HTML5历史记录API来使应用程序中的某个状态"可 标记 "。稍后，我将回到如何使用历史记录API在单页应用程序中建立可 标记 状态。
历史堆栈
浏览历史由一堆URL组成。每次 用户 在同 一个 网站中浏览时，新 页面 的URL都会放在堆栈的顶部。当 用户 单击"后退"按钮时，堆栈中的指针将移动到堆栈中的上 一个 元素。如果 用户 再次单击"前进"按钮，则指针将向前移到堆栈上的最顶层元素。如果 用户 单击"后退"，然后单击新 链接 ，则堆栈中最顶层的元素将被新的URL覆盖。
这是历史记录堆栈的示例：
http://myapp.com/great-new-story.html http://myapp.com/news.html http://myapp.com
在上述历史记录堆栈中访问的最后一页是http://myapp.com/great-new-story.html。如果 用户 单击"后退"按钮，则历史记录堆栈中的指针将移回?http://myapp.com/news.html。如果 用户 单击"前进"按钮，则历史记录堆栈指针将向前移动http://myapp.com/great-new-story.html，但是如果 用户 单击另 一个 链接 (在http://myapp.com/news.html 页面 上)，则该 链接 的URL将http://myapp.com/news.html在历史记录堆栈中覆盖?。
HTML5历史记录API使Web应用程序可以访问该历史记录堆栈。
HTML5历史记录API安全限制
HTML5历史记录API仅允许网页访问部分浏览历史记录，该部分与网页本身位于同一域中。出于安全原因，历史记录API中的此限制是必需的，因此网页无法查看 用户 访问过哪些其他网站。
同样，HTML5历史记录API不允许网页将URL推入历史记录堆栈中，该URL与网页的域不在同一域中。该限制确保了当 用户 开始输入网页时，网页不能假装已将 用户 转发到例如Paypal并嗅探其 用户名 /密码等。
历史对象
您可以通过history对象访问浏览历史记录，该对象在JavaScript中可以作为全局对象使用(实际上是window.history)。
该history对象包含以下 功能 - 包括 历史记录API：
back()
forward()
go(index)
pushState(stateObject,title,url)
replaceState(stateObject,url)该back() 功能 将浏览历史记录移回到上 一个 URL。 调用 back()?具有与 用户 单击浏览器的"后退"按钮相同的 效果 。
该forward() 功能 将浏览历史记录向前移动到历史记录的 下一页 。 调用 forward()与单击浏览器的"转发"按钮具有相同的 效果 。仅back()在 调用 该 函数 或单击"后退"按钮时才可能。如果历史记录已经指向浏览历史记录中的最新URL，则没有任何前进的方向。
该go(index) 函数 可以根据您作为参数传递给该go() 函数 的索引来向后或向前移动历史记录。如果您go()使用负索引进行 调用 (例如go(-1))，则浏览器将返回历史记录。如果您向go()? 函数 传递 一个 正索引，那么浏览器将在浏览历史记录中向前移动(例如go(1))。索引指示历史记录中要在浏览历史记录中前进或后退的步骤，例如1,2，-1，-2等。
该pushState(stateObject,url) 函数 将新的URL推送到历史记录堆栈。该 函数 具有三个参数。该url是推到历史堆栈的URL。该title?参数通常被浏览器忽略。的stateObject是，当 一个 新的URL被压入历史堆栈，将随着事件传递的对象解雇。它stateObject可以包含您想要的任何数据。它只是 一个 JavaScript对象。
该replaceState(stateObject,url) 函数 的 功能 类似于该pushState() 函数 ，只是它将历史记录堆栈中的当前元素替换为新的URL。当前元素不一定是最重要的元素。这是目前所指向的元件，其可以是在堆栈中的任何元件，如果?back()，forward()和go() 功能 已经被称为上history?对象。
历史API示例
现在该来看一些有关如何使用HTML5历史记录API的示例。
back()和forward()
首先让我们看看如何使用back()和?forward() 函数 在历史记录中来回移动：
history.back(); history.forward();请记住，history对象位于window对象中，因此您还可以编写：
window.history.back(); window.history.forward();但是，由于该window对象是 默 认对象，因此可以将其省略。window在本教程的其余部分中，我将忽略该?对象。
请记住，除非您(或 用户 )首先移回历史记录，否则您无法移入历史记录。
go()
现在让我们看看如何使用该go() 函数 执行类似于back()和?forward() 函数 的动作。首先，这是您用来go()向后浏览历史记录的上一步：
history.go(-1);要向后移动两步，您可以将-2参数作为参数传递给go() 函数 ，如下所示：
history.go(-2);同样，要使历史向前发展，您可以向go() 函数 传递正索引。这是两个在历史上向前推进了一步和两个步骤的示例：
history.go(1); history.go(2);当然，如果您同时执行了这两行，则浏览历史记录将总共向前移动3个步骤。
pushState()
要将状态推入历史记录堆栈，请 调用 ?对象的pushState() 函数 history。这是 一个 pushState()示例：
var?state?=?{};var?title?=?""; var?url???=?"next-page.html"; history.pushState(state,?title,?url);本示例将新URL推送到历史记录堆栈中。这还将更改浏览器的地址字段中的URL，但不会导致浏览器尝试加载该URL。
replaceState()
该replaceState() 函数替换 了当前指向的历史记录堆栈中的history元素。如果 用户 已使用"后退"按钮将其移回历史记录，则这可能不是最重要的元素。这是 一个 replaceState()示例：
var?state?=?{}; var?title?=?""; var?url???=?"another-page.html"; history.replaceState(state,?url);替换状态也将更改浏览器的地址字段中的URL，但不会使浏览器加载该URL。替换URL的 页面 仍保留在浏览器中。
浏览历史记录更改
HTML5历史记录API使网页能够侦听浏览器历史记录中的更改。安全限制也适用于此，因此不会向网页 通知 导致URL超出网页域之外的历史记录更改。
要侦听浏览器历史记录中的更改，请onpopstate在window?对象上设置侦听器。这是浏览器历史记录事件侦听器示例：
window.onpopstate?=?function(event){ ????console.log("历史记录更改为："?+?document.location.href); ?}该onpopstate事件处理 函数 将被 调用 每次在同一页内的浏览器历史记录更改(浏览器的历史， 页面 推送到历史堆栈)。对历史更改事件的反应可能是从URL 提取 参数并将相应的 内容 加载到 页面 中(例如，通过AJAX)。
注意：只有改变而导致的任何"返回"或"前进"按钮，或相应的历史导航 功能 ?back()，forward()并且go()将导致onpopstate事件侦听器被 调用 。 调用 pushState()和replaceState() 函数 将不会触发历史记录更改事件。
在实践中使用History API
当将新的URL推入历史记录堆栈时，浏览器的地址字段中的URL将更改为新的URL。但是，浏览器不会尝试加载该URL。仅 显示 URL并将其推入堆栈，就像浏览器已访问该 页面 一样，但是推送新状态的 页面 仍保留在浏览器中。
将新URL推送到历史记录堆栈是一种使单页应用程序(SPA)中的特定状态可 添加 书签的有用 方法 。例如，在单页在线商店中，应用程序的URL可能是：
http://myshop.com该应用程序可能能够在同一 页面 中向 用户 显示 产品，但是 用户 如何将指向特定产品的 链接 发送给朋友？
解决方 案是，当加载新产品时，单 页面 应用将新URL推送到历史记录堆栈中。这不会导致新URL的加载，但确实会使新URL在浏览器的地址字段中可见。从这里可以将其 添加 为书签或复制粘贴到电子 邮件 等中。以下是这种可 添加 书签的URL外观的示例：
http://myshop.com?productId=234或者，也许是 一个 更具可读性的URL：
http://myshop.com/products/234或者是 一个 略多于REST的版本(也提到了产品类型)：
http://myshop.com/products/books/234在将该URL推送到浏览历史记录之后，Web商店 页面 将通过AJAX加载相应的产品并将其 显示 给 用户 。
如果 用户 单击"后退"按钮，onpopstate则将 调用 事件处理程序。然后，网页应查看新的URL是什么，如果URL返回，则加载与该URL对应的产品或应用程序的 首页 http://myshop.com。
这是 一个 HTML5 代码 示例，说明了使用AJAX将数据加载到浏览器中的原理：
<a?href="javascript:push('http://myshop.com/books/123');"> ????Book?123 </a>?<br/> <a?href="javascript:push('http://myshop.com/apps/456');"> ????App?456 </a> <script> function?loadUrl(url)?{ ????console.log("loading?data?from?url:?"?+?url); } function?push(url)?{ ????history.pushState(null,?null,?url); ????loadUrl(url); } window.onpopstate?=?function(event)?{ ????console.log("history?changed?to:?"?+?document.location.href); ????loadUrl(document.location.href); } </script>本示例包含两个具有JavaScript Click侦听器的 链接 。单击 链接 之一后，相应的URL将被推入历史记录堆栈，然后加载到浏览器中。
该示例还包含 一个 onpopstate事件侦听器。当 用户 单击"后退"或"前进"按钮时，此事件侦听器将加载浏览器地址字段现在 显示 的任何URL。
配置服务器
如果 用户 单击 链接 和"后退" /"前进"按钮，则前面 显示 的示例将起作用。但是，如果 用户 将URL发送给朋友或将其 添加 为书签并稍后访问，该怎么办？
如果 用户 尝试访问加 标签 的URL，http://myshop.com/books/123则浏览器将向Web服务器请求该URL。Web服务器需要知道它必须发送回与从URL发送回的相同的单页应用程序http://myshop.com。您将需要配置Web服务器来执行此操作。
同样，单页Web应用程序必须查看首次加载时使用的URL，并使用该URL确定要加载和 显示 的 内容 。因此，如果单页应用程序已加载URL，则?myshop.com/books/123该应用程序应加载相应的产品并 显示 它。此URL检查必须在单页应用程序初始化期间进行。
浏览器对HTML5历史记录API的 支持
在撰写本文时，除Opera Mini外，所有现代浏览器(IE，Safari，Chrome，Firefox)都 支持 HTML5历史记录API。
HTML 5 代码规范 ? ?HTML5 WebSocket
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did92391