如何使用html5 pushstate方法将动态页面索引到谷歌

Question

我正在构建一个完全支持jquery的网站，因此我使用ajax动态加载所有页面，以实现页面之间的奇妙转换，并最大限度地提高用户体验。这是我的javascript代码：

$(function() {
var path = _.compact(location.pathname.split("/"));
if(path.length<2){
path = 'home' 
}else{
path = path[path.length-1];
}
activepage = path;
$('.nav a').click(function(e) {
href = $(this).attr("href");            
loadContent(href);      
// HISTORY.PUSHSTATE
window.history.pushState('', 'New URL: '+href, href);   
e.preventDefault();                     
});
// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event) {
var path = _.compact(location.pathname.split("/"));
if(path.length<2){
path = 'home' 
}else{
path = path[path.length-1];
}           
loadContent(path);
};
});

function loadContent(url){  
// USES JQUERY TO LOAD THE CONTENT
var adresa = absurl + "ajax/get_content";       
$.ajax({
url: adresa,
contentType: 'application/json',
data: { url: url },
success: function(data) {
switch(url)
{
case "projects": $.projects({ data : data }); $.projects.init();
break;
case "home": $.homePage({ data : data }); $.homePage.init();
break;
default: console.log("nista");
}
}
}); 
}

Ajax函数返回以json格式构建页面所需的所有数据，然后我初始化我的自定义插件，该插件使用该json数据构建页面。

所有这些都非常好，正如你在这个实时示例中看到的那样，包括浏览器历史记录(前后)。但这是我的问题。。。当页面完全加载时，当我查看页面的源时，主容器保持为空。当我试图以谷歌机器人的身份获取页面时，它也是空的，我很确定这两者是相关的。

正如你在这个例子中看到的，使用与我几乎相同的代码，当你点击链接时，源代码会被更改，它也会更改页面内容，但不会重新加载页面。我的问题是，我在这里缺少了什么，以及如何达到同样的效果？我是不是遗漏了一些php代码？在过去的几天里，我一直在为此而挣扎，我尝试了一切，但都没能成功。

注意：目前只有主页和项目链接有效。。。

非常感谢所有回复！

Answer 1

pushState允许您在使用Ajax更新页面内容时更改URI的本地部分。

对于以这种方式创建的每个URI，允许服务器在不依赖JavaScript的情况下构建相同的页面。

这将：

• 当访问者通过深度链接进入网站时，提供更好的性能
• 允许网站在没有JavaScript的情况下工作(包括搜索引擎机器人)

Answer 2

作为@Quentin答案的补充，您需要在PHP中确定内容是否通过ajax加载。如果不是，则必须显示请求页面的全部内容，包括页眉、页脚和页面内容。