Question

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

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

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

这种技术叫做什么？

Answer 1

使用javascript＆amp; amp; DOM用fadeIn()和[fadeOut（）] [2]动画（用于jQuery）更改页面内容。

对于页面位置更改：

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

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

Doc说：

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

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

Answer 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正在幕后加载内容，转换会产生视觉效果，而一些狡猾的JS会使链接看起来发生变化。

Answer 3

可能会使用pushState() API将浏览器网址更改为“假冒”导航。可以通过AJAX预加载或获取新内容。

如何加载页面而不重新加载？

3 个答案: