如何在不重新加载页面的情况下加载页面

How to load a page without reloading it?

本文关键字：加载 情况下 新加载      更新时间：2023-09-26

可能重复：
修改URL而不重新加载页面

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

当我去http://www.heroku.com/how/relax然后单击其他菜单（Deploy、Connect和…等等），我看到浏览器更改了url，但感觉像Ajax。

这种技术叫什么？

使用javascript&DOM使用fadeIn（）和[fadeOut（）][2]动画更改页面的内容（对于jQuery）。

对于页面位置更改：

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

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

医生说：

pushState（）接受三个参数：一个state对象、一个title（当前已忽略）以及（可选地）URL。

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

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

违规代码：

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使链接看起来发生了变化。

相关文章：