如何在不重新加载的情况下加载页面？ [复制]答案

【问题标题】：How to load a page without reloading it? [duplicate]如何在不重新加载的情况下加载页面？ [复制]
【发布时间】：2012-02-23 18:28:14
【问题描述】：

可能重复：
Modify the URL without reloading the page

我知道这个主题有点奇怪。

当我转到http://www.heroku.com/how/relax 并单击其他菜单（部署、连接等）时，我看到浏览器更改了它的 url，但感觉就像 Ajax。

这种技术叫什么？

【问题讨论】：

@x3ro // 这正是我想要的。谢谢！

标签： javascript ajax hash

【解决方案1】：

使用 javascript 和 DOM 调用此技术，以使用 fadeIn() 和 [fadeOut()][2] 动画（用于 jQuery）更改页面内容。

页面位置变化：

您必须使用HTML5's pushState() method 来更改浏览器历史记录。

window.history.pushState(data, "Title", "/new-url");

文档说：

pushState() 接受三个参数：一个状态对象，一个标题（即当前被忽略）和（可选）一个 URL。

最后一个参数是新的 URL。出于安全原因，您只能更改 URL 的路径，而不能更改域本身。第二个参数是对新状态的描述。第一个参数是您可能希望与状态一起存储的一些数据。

【讨论】：

这并不能解释 URL 的变化。
HTML5 的 pushState() 方法可以做到这一点。哦，也许你在我更新的时候发表了评论..

【解决方案2】：

违规代码：

historyAPISupported : function(){
  return (typeof window.history.pushState !== 'undefined')
},

clickTab : function(tab){
  var humanTab = tab.replace('js-', '')
  var newUrl = document.location.pathname.replace(/\/(how.*)/, '/how/' + humanTab)
  this.activateTab(tab)
  if (this.historyAPISupported()){
    window.history.pushState({ path: newUrl }, null, newUrl)
  }else{
    if (document.location.pathname != newUrl){
      document.location.href = document.location.href.replace(/\/(how.*)/, '/how/' + humanTab)
    }
  }
},

我可以说它仍然使用锚点，但利用浏览器历史记录进行更改（您可以快速看到您的“进度”栏显示位置的哈希值，但浏览器 url 更改）。

除此之外，内容从一开始就加载，内容只是淡入淡出。

关于实际问题，我认为没有具体的名称。 AJAX 是在幕后加载内容，transitions 使视觉效果，一些狡猾的 JS 使链接看起来发生了变化。

【讨论】：

链接确实发生了变化，而不仅仅是外观。即使预加载了许多内容，该页面也会加载。您可以通过每次单击菜单项时重新加载页面的图标来判断。
@Travis: 一定是你的浏览器，因为我看到所有内容都加载在各种/html/body/section/div/article/aside 元素下，这些元素与标签相关，然后设置样式/动画以显示/隐藏。
我正在使用谷歌浏览器。然而，经过进一步检查，似乎浏览器只是被欺骗看起来像是在重新加载，因为当我跟踪网络活动时，很明显，当每个链接被点击时，页面实际上并没有重新加载所有资源（集合中的连接等）。总之，我不得不同意转换是在代码中完成的，而不是通过重新加载。

【解决方案3】：

很可能使用pushState() API 来处理浏览器 URL 更改为“假”导航。可以通过 AJAX 预加载或获取新内容。

【讨论】：