0

我正在构建一个完全支持 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 代码还是什么？在过去的几天里，我一直在为此苦苦挣扎，我已经尝试了所有方法，但无法使其正常工作。

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

非常感谢所有回复！

4

2 回答 2

1

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

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

这会：

  • 当访问者通过深层链接进入网站时提供更好的性能
  • 允许网站在没有 JavaScript 的情况下工作（包括搜索引擎机器人）
于 2012-11-28T15:12:00.183 回答
0

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

于 2012-11-28T16:11:05.840 回答