0

我正在尝试将我的网站转换为具有 pushstate 和 popstate 控制位置的完整 html5 ajax 网站。

我目前的文件结构如下：

common/header.php
common/footer.php
index.php
page1.php
page2.php
page3.php
page4.php
page5.php

好的，所以当前所有文件都包含“common”文件夹中的“header.php”和“footer.php”文件。

我的页眉和页脚文件的基本版本如下所示：

Header.php（包括 pushState/popState/ajax 脚本）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script>
$(function() {
    $('a').on('click', function(e) {
        var href = $(this).attr("href");
        loadContent(href);
        history.pushState({}, '', href);
        e.preventDefault();
    });
    $(window).on('popstate', function() {
        console.log("pathname: "+location.pathname);
        loadContent(location.pathname);
    });
});

function loadContent(url) {
    $('#wrapper').load(url);
}
</script>

<title>REZIINE</title>

</head>
<body>

<div id="wrapper-outer">
<div id="wrapper">

页脚.php：

</div>
</div>

</body>
</html>

现在，如果我将页眉和页脚包含在所有文件中，那么当我使用新的 HTTP 请求导航到它们的任何 URL 时，页面工作正常，但是当我尝试使用锚链接导航时，一些 CSS 样式引用父div 而不是页面，它通常不能完美显示。

另一方面，如果我不在索引页面以外的页面中包含页眉和页脚文件，则它们在从索引页面开始导航到它们时加载正常，但是如果我尝试使用直接指向任何新的 HTTP 请求显示 index.php 文件以外的文件 URL，而不仅仅显示原始页面内容，因为不包括包含所有脚本和 css 文件的头文件。

我需要确切地知道应该如何构建这样的网站，以便如果我访问 mysiteurl.com 则索引页面加载正常，并且如果我使用新的 http 请求直接导航到另一个页面，例如 mysiteurl.com/page3 .php 加载也很好，所有导航都正常工作。

提前感谢任何为我安排的人。

4

1 回答 1

0

将jquery-pjax与片段选项一起使用。

您的脚本header.php将类似于

<script>
$(function() {
  $('a').pjax({
    container: "#wrapper",
    fragment: "#wrapper"
  });
});
</script>
于 2012-08-08T06:47:10.433 回答