关于javascript：如何加载页面而不重新加载？


How to load a page without reloading it?

本问题已经有最佳答案，请猛点这里访问。

Possible Duplicate:
Modify the URL without reloading the page

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

当我访问http://www.heroku.com/how/relax并单击其他菜单(deploy、connect和…等等)时，我看到浏览器更改了其URL，但感觉像Ajax。

这种技术叫什么？

相关讨论

使用javascript&dom调用此技术，使用fadein()和[fadeout()][2]动画(用于jquery)更改页面内容。

对于页面位置更改：

您必须使用HTML5的pushState()方法更改浏览器历史记录。

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

博士说：

pushState() takes three parameters: a state object, a title (which is
currently ignored), and (optionally) a URL.

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

相关讨论

它很可能使用pushState()API将浏览器的URL更改为"假"导航。新内容可以通过Ajax进行预加载或提取。

违规代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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会使链接看起来发生变化。

相关讨论