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

-1

可能重复：
Modify the URL without reloading the page 如何加载页面而不重新加载？

我知道的主题是有点古怪。

当我转到http://www.heroku.com/how/relax并单击其他菜单（Deploy，Connect等...）时，我发现浏览器更改其url，但感觉像是Ajax。

这种技术叫做什么？

来源

2012-02-01 Moon

@ x3ro //这就是我一直在寻找的东西。谢谢！ – Moon 2012-02-01 01:54:46

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

对于页面位置的变化：

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

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

文件表示：

pushState的（）有三个参数：一个状态对象，一个标题（这是目前忽略），和（任选地）一个URL。

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

来源

2012-02-01 01:49:22

这并不能解释URL更改。 – millimoose 2012-02-01 01:54:05

HTML5的pushState（）方法可以做到这一点。哦，可能是你在我更新时发表评论.. – 2012-02-01 01:55:45

似乎是这样，对不起。 – millimoose 2012-02-01 01:57:09

违规代码：

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使链接看起来改变。

来源

2012-02-01 01:54:03

链接确实发生了变化，而不仅仅是外观。即使许多内容已预先加载，页面也会加载。您可以通过点击图标来确定每个菜单项上重新加载的页面。 – 2012-02-01 02:00:21

@Travis：必须是你的浏览器，因为我看到所有加载在与标签相关的各种'/ html/body/section/div/article/aside'元素下的内容，然后设计/动画显示/隐藏。 – 2012-02-01 02:03:21

我正在使用谷歌浏览器。但是，经过进一步的检查，似乎浏览器只是被欺骗，看起来像重新加载，因为当我跟踪网络活动时，很显然，当单击每个链接时页面实际上不会重新加载所有资源（集合连接等）。总之，我必须同意转换是通过代码完成的，而不是通过重新加载。 – 2012-02-01 21:51:37

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

来源

2012-02-01 01:56:19 millimoose

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

回答

相关问题