网站中的静态内容

Question

我有一个网站，我想将其中的一部分设为静态。发生的情况是每个页面的页眉、菜单栏和页脚都是一致的。我希望它们总是被加载，当我点击菜单按钮时，它只会重新加载网站的正文。

是否有一个简单的代码块可以尽早实现这一点？ js或ajax中的东西？很抱歉，我没有足够的这些语言经验来独自完成一些事情。我已经尝试检查 jQuery 库，但它仍然让我很困惑。

谢谢。

Answer 1

我认为你甚至不需要 Ajax 或 css！只需使用 iFrame！他们太棒了，发生的事情是你只设计一个页面作为你的静态内容的持有者（Header-Menu ...），并将一个 iFrame 放在那里作为你想要加载的任何页面的占位符，你应该使用适当的 css 代码将 iFrame 放置在您想要的位置，现在，对于菜单中的每个链接，只需将“target”属性设置为等于您的 iFrame 的名称，所有链接都将加载到该 iFrame 中，您的页面将不会每次点击链接都会重新加载...我会返回一些代码...

Answer 2

只需在每个页面中添加一个带有标题、菜单栏和页脚 ID 的 div 容器，然后使用以下内容加载它：

$(document).ready(function(){ 
    $('#header').load('header.html');
    $('#menubar').load('menubar.html');
    $('#footer').load('footer.html');
});

只需确保 html 文件中没有 html、head 或 body 标记，只有您将在 div 中编写的 HTML 代码。就像 PHP 中的 include 函数一样。

编辑：

为了简单和简单的实现，将上面的代码存储在一个 .js 文件中（例如 include.js），并将其添加到每个头中，就在您的 html 文件的所有其他脚本的包含下方：

<script type="text/javascript" src="include.js"></script>

EDIT2：

另一种解决方案是加载页面内容，而不是页眉、菜单栏、页脚。 在这里，您采用相同的规范（内容 html 文件中没有 html、body 等标签）

为您的内容 div 命名，例如<div id="content"></div>

例如您的导航栏：

<div id="navbar">
    <a href="content1.html">Content1</a>
    <a href="content2.html">Content2</a>
</div>

JavaScript 代码：

$(document).ready(function() {
    //Click on a link that's child of the navbar
    $('#navbar > a').click(function() {
        //Get the html file (e.g. content1.html)
        var file = $(this).attr('href');
        //Load this file into the #content
        $('#content').load(file);
        return false;
    });
});

Answer 3

你应该考虑使用Server Side Included：http://httpd.apache.org/docs/current/howto/ssi.html

这不是很容易理解（因为它指的是 apache 配置），但这是一个非常好的解决方案。

简而言之，您在主页中包含部分 html 代码：

 <!--#include virtual="/footer.html" --> 

您不必使用或理解所有 JQuery Framewol，用户代理不必解析（如果他们能够！）Javascript。

这是 PHP / ASP / Java 的一个很好的替代品。

Answer 4

您可以使用 ajax 来请求每个页面的正文。但这只是一种可能性——有很多。另一种方法是使用脚本语言（php、perl）服务器端创建页面内容，并在那里使用一个函数，为每个页面添加页脚、页眉和其他任何内容。

Answer 5

如果您对 Jquery 有所了解，请使用菜单链接上的点击事件将页面加载到 div 中，如下语法可能对您有所帮助。

$(document).ready(function(){
   $("a.menu").click(function(){
      $("#bodyContent").load("http://abc.com/your-linked-page.html");
   });
});

要动态加载 url，请使用以下代码： 在您的菜单栏中，链接如下所示：

<a href="javascript:void(0);" title="Specify-Complete-URL">Home</a>

在您的 Jquery 代码中：

$(document).ready(function(){
   $("a.menu").click(function(){
      url = $(this).attr("title"); // here url is just a variable
      $("#bodyContent").load(url);
   });
});  

第 1 步：将 Jquery 文件添加到您的 html 页面中。

第 2 步：使用上面的 jquery 代码并将您的菜单链接更改为我在此处所说的新内容。

第 3 步：如果你做得对，它会为你工作。

Answer 6

传统的iframe 怎么样？

在您的菜单中：

<a target="body" href="URL_to_your_Menu1_page">Menu1</a>

然后在文档中进一步：

<iframe name="body" src="URL_to_homepage"></iframe>

Answer 7

您可以使用框架集和框架并相应地组织您的页面。因此，包含菜单的框架可以始终处于显示状态，并且在单击菜单时显示内容时，您可以将目标设置为您希望加载内容的框架。