刷新/共享链接时，WebSite Ajax导航无法工作

Question

我正在构建一个带有ajax导航的网站，所以当用户每次想要看到另一个页面时，整个站点都不需要加载。家，关于，新闻，联系等..。

我建立了它，有url刷新，后退按钮，一切都好。

但我有以下问题。

Compartilhar/Refresh:

当我刷新页面或与他人共享链接时，网站无法正常加载。它只加载站点的特定部分。示例:如果我共享链接mysite.com/about.php，它将只从主布局中加载没有页眉、页脚和其他公共元素的页面文本。也没有css。

如果我在另一页刷新页面，也会发生同样的情况。

我试着跟踪这个这里的教程，但是它没有加载任何东西。给我一个空白处。

下面的代码正在工作，但与我前面描述的问题有关。

Jquery代码：

$(document).ready(function() {
    var content = $('#site'),
        firstLink = $(".navbar li:first-child a").attr("href"),
        navLink = $(".navbar li a");

    content.load(firstLink); //default load

    navLink.on("click", function(event){
        event.preventDefault();
        event.stopImmediatePropagation();
        var newLink = $(this).attr("href");

         History.pushState(null, newLink, newLink);

        $(".active").removeClass("active");
        $(this).addClass("active");
        content.load(newLink, function () {
            FB.XFBML.parse();
        });

    });

    History.Adapter.bind(window, "statechange", function() {
        $(".active").removeClass("active");
        $("a[href='" + History.getState().title + "']").addClass("active");
        content.load(document.location.href); 
    });
});

网站结构代码：

<head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
    <header>
        <!-- more code in here -->
    </header>
    <nav class="navbar">
        <div class="container">
            <ul>
                <li><a class="active" href="/content/home.php">Home</a></li>
                <li><a href="/content/services.php">Services</a></li>
                <li><a href="/content/people.php">People</a></li>
                <li><a href="/content/about.php">About us</a></li>
                <li><a href="/content/news.php">News</a></li>
                <li><a href="/content/contact.php">Contact</a></li>
            </ul>
        </div>
    </nav>
    <div id="site"></div>
    <footer>
        <!-- more code in here -->
    </footer>
    <script type="text/javascript" src="js/history.js"></script>
    <script type="text/javascript" src="js/scripts.js"></script>
</body>

Answer 1

Cookie way:

• 创建会话过期cookie。
• 当有人请求一个页面并让拥有时，这个cookie只发送页面的部分。

但

• 如果有人请求一个页面而还没有这个cookie。设置会话cookie并发送所有索引页+额外内容。

示例：

1. I请求services.php和拥有cookie X。服务器将只发送services.php

2.我请求services.php和没有cookie X。服务器将发送index.php，并在index.php中创建和包含services.php，如：

//some html
if (!$_COOKIE["some_cookie_name"]) {
    include_once("the_page.php");
}
//more html

3.如果我请求/，服务器将只发送index.php

如果您做了URL参数中的包含，请注意它们可以键入什么，以及您如何处理。

javascript (jQuery)方式：

• 步骤1.签入PHP是普通的GET还是AJAX GET (http://davidwalsh.name/detect-ajax)。你可以用多种方式来做。
  • 如果调用是AJAX的话。提供页面的部分。
  • 如果调用不是AJAX。为index.php服务

​

• 步骤2.在index.php中包含一个javascript，检查URL的内容，然后检查特定div的内容，如.：
  • 如果URL为services.php，而div #yourdiv的内容为空->，则对services.php进行ajax调用。
  • 如果URL是/或者div #yourdiv的内容不是空的->什么都不做。

​

javascript (jQuery) + Cookie way:

• 步骤1.签入PHP是普通的GET还是AJAX GET (http://davidwalsh.name/detect-ajax)。你可以用多种方式来做。
  • 如果调用是AJAX的话。提供页面的部分。
  • 如果调用不是AJAX。为index.php提供服务，并将一些cookie名称设置为您想要的页面(例如: services.php)。

​

• 步骤2.在您的index.php中包含一个javascript，检查您以前创建的cookie是否存在.：
  • 如果cookie存在->对cookie值中的url执行ajax调用&删除cookie。
  • 如果饼干不存在-什么也不要做。

​

希望它能帮上忙