我建立一个全面的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");
}
}
});
}
阿贾克斯函数返回打造JSON格式网页所需的所有数据,然后我初始化它建立使用JSON数据的页面我的自定义插件。
你可以在此看到所有这些工作完全正常活生生的例子 ,包括浏览器历史记录(向后和向前)。 但这里是我的问题......当页面完全加载当我看网页的源主容器保持为空。 此外它的空当我尝试抓取网页的谷歌机器人,我敢肯定,这两个是相关的。
正如你可以看到在这个例子与几乎相同的代码像我有,当你点击链接的源被改变,它改变了页面内容为好,但没有重新加载页面。 我的问题是,我在这里失踪,以及如何达到同样的效果? 我失去了一些PHP代码还是什么? 我与这在过去几天里挣扎,我用尽了一切,我不能使它发挥作用。
注意:只有家庭和项目链接的工作现在...
非常感谢所有答复!