Question

我有一个所有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>

Answer 1

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

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

现在您可以做到这一点，您可以通过以下命令将标题包含在任何shtml页面中

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

唯一的先决条件是服务器应该支持SSI（服务器端注入）。

Answer 2

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

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

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

这会将html插入body元素顶部的includes / header.html中。你也可以在头上插入东西。（将'body'替换为'head'）

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

2 个答案: