如何动态更改页面的HTML源？

Question

到目前为止，我认为无法在不重新加载页面的情况下修改页面的HTML源代码。我怀疑我刚刚看到的是与pushState有关（但不仅如此）：在Quartz网站（qz.com）上，一旦你到达了你的那个底部，你就可以无缝滑动到下一篇文章阅读，简洁地更新URL，令人惊讶的是，更新的HTML源代码。

例如，向下滚动任何文章，例如：http://qz.com/643497/we-are-witnessing-the-rise-of-global-authoritarianism-on-a-chilling-scale/

也许我错过了什么，但有人能解释一下这是怎么回事吗？这里使用了哪些HTML5 API？

注意：我的问题专门针对更新显示页面源（显然不是DOM检查器）时可以看到的 HTML内容。

Answer 1

这看起来很像典型的异步内容加载，但是是的，他们使用pushState来更改URL。我认为是什么让你的路线设计得很好，所以去那个网址首先会给你同样的文章。然而，在幕后，它只是一系列JSONP请求与pushState（）相结合，以提供一个漂亮的流动，格式良好的文档。您甚至可以使用任何现代调试控制台的网络选项卡验证请求。

有关使用pushState进行网址更新的信息，请参阅此答案：Modify the URL without reloading the page

修改

由于你对这个消息来源的变化感到困惑，所以请这样思考：当我说“这些路线经过精心设计，以便到达那个网址时首先给你同样的文章”我的意思是转到该页面将反映该文章。通过查看源代码所做的就是获取活动URL（由pushState修改，因此您实际上将转到另一个页面来检索源）并在没有DOM解析/呈现的情况下获取文本。我希望能够澄清这个网站上发生的事情。

Answer 2

现在，您可以在大多数“现代”浏览器中执行此操作！

以下是我读过的原始文章（2010年7月10日发布）:( HTML5: Changing the browser-URL without refreshing page）。

有关pushState / replaceState / popstate（又名HTML5 History API）的更深入研究，请参阅MDN文档。

你可以这样做：

window.history.pushState（“object or string”，“Title”，“/ new-url”）;