Question

我想使用jQuery / AJAX $().load()函数重新加载我网站的内容区域。但我的问题是，无论您的输入网址是什么，都需要在所有网页上显示header和footer。

我的网站是使用模板构建的，所以我首先想到的是删除布局输出上面和下面的唯一内容，因为我会阻止ie。菜单显示两次。但我意识到，如果用户没有通过第一页进入我的网站，让我们说index.php，他将永远不会看到页眉或页脚只是一个没有样式的文本页面。

我的问题是，你将如何解决这个问题？允许使用JavaScript（+ jQuery）和HTML5。

Answer 1

page.php文件：

<div id="header"></di>
<div id="mainContent"></div>
<div id="footer"></div>

JS：

$("#content").load("page.php #mainContent"); //that will only load mainContent

或：

$.get('page.php', function (data) {
    data = $(data).find('#mainContent').html();
    $("#content").empty().append(data);
});

有关详细信息，请参阅load() and page fragments

上jQuery文档中的部分

Answer 2

看起来你可以有几个不同的选择。如果用户正在访问您的站点但没有访问第一页，那么您可以检查以确认页面加载后页眉和页脚是否显示。如果找不到它们，则应创建初始站点布局。您甚至可以决定以这种方式构建第一页（index.php），以便以相同的方式处理每个页面

$(document).ready(function() {
    // If an element of id "header" isn't found in the DOM
    if (!$("#header").length() > 0) {
        // Generate the header and insert it as the first element of the DOM
    }
    if (!$("#footer").length() > 0) {
        // Generate the footer and append it to the last element of the DOM
    }
});

毫无疑问，您也可以享受其他解决方案;如果通过GET而不是AJAX请求请求页面，则每个页面上可能只包含一个include。

Answer 3

您正在寻找的技术称为Hijax，您可以在其中拦截来自AJAX请求的响应，并且仅提取您要在呈现的页面上替换的DOM部分。

一般的想法是，实际的URL本身仍将返回整页内容，因此如果请求来自新访问者，则整个DOM将加载，但如果请求来自用户单击hijaxed链接在您的页面上指定了CSS选择器，然后只替换选择器标识的页面部分。

看看Hijax - jQuery Plugin。实际站点本身是使用插件构建的，如果您在Chrome或Firebug工具中查看网络选项卡并查看检查器，则可以看到内容被换出而无需替换菜单，标题或其他元素。没有被替换。

$（）。load（）而不是加载整个页面，但需要在所有页面上保留菜单

3 个答案: