想要将一个 html 页面包含到客户端的另一个页面中答案

【问题标题】：want to include one html page to another page in the client-side想要将一个 html 页面包含到客户端的另一个页面中
【发布时间】：2013-08-16 10:45:08
【问题描述】：

我对所有 html 页面都有一个共同的标题，所以我希望 header.html 页面包含在另一个 html 页面中。建议一些方法，因为这个标题需要在所有 html 页面中给出。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    <style type="text/css">
    header#arriba {
        width:1350px;
        height:30px;
        clear:both;
        margin:auto;
        text-align:center;
        background-color:red;
        color: white;

    }

    header#arriba img {
        vertical-align:middle;
        margin:2px 700px 2px 35px; /* YOU CAN ADJUST IMAGES SPACE WITH THIS MARGINS */
    } 

    header img{
      float:left;
      margin-right:5px;

    }
    </style>
</head>
<body>
    <header id="arriba">
        <h2><img src="header.png" alt="1" width="150px" height="25px"/>Data</h2>    
    </header>
</body>
</html>

【问题讨论】：

如何将其包含到另一个 html 页面中，而无需一次又一次地将该代码包含到所有其他页面中？？？
你在使用任何框架吗？您可以为此使用任何模板引擎，几乎都可以处理。

标签： html

【解决方案1】：

首先将所有页面的扩展名从“html”改为“shtml”。

创建一个包含标题的 HTML 页面。

现在您可以通过以下命令将您的标头包含到任何 shtml 页面中

<!--#include virtual="Web/Controls/TopPanel.html" -->

唯一的前提是服务器应该支持SSI(Server Side Injection)。

【讨论】：

我所说的服务器端注入是指您必须有一个服务器来托管您的网站（如果它是静态 HTML 网站或 Web 表单或 MVC）。就像您将它托管在 IIS 上一样，那么 IIS 应该支持服务器端注入。因此，每当向您的页面发出请求时，它实际上会将服务器上的标头部分包含到您的页面中，然后将 HTML 传输到客户端..

【解决方案2】：

只有使用 AJAX 才能包含客户端页面。查看 jQuery 以获得一个简单的 AJAX 库。

示例代码（假设包含 jQuery）：

$.ajax("includes/header.html").then(function(data) {
    $('body').prepend(data);
});

这会将html插入到body元素顶部的includes/header.html中。你也可以在头部插入东西。（将“身体”替换为“头”）

【讨论】：