Question

我想将一个HTML文件添加到另一个。

例如：我有header.html和footer.html 现在我正在尝试创建aboutus.html我要添加这两个HTML文件的位置除了JavaScript之外，这些文件中没有动态代码。

如果不使用除JavaScript和CSS之外的任何脚本语言，我该怎么做？

Answer 1

Server Side Includes (SSI)存在此特定功能。但是，您需要为此类包含配置服务器。 Apache支持它。不确定其他网络服务器。

Answer 2

或Server Side Includes (SSI)，所有嵌入都在服务器端完成......

Answer 3

在没有javascript的情况下，在客户端上执行此操作的唯一方法是使用框架或iframe。如果你想使用javascript，你可以使用AJAX。大多数javascript框架提供相应的便捷方法（例如jQuery的load函数）。

显然有很多服务器端解决方案，包括apache的流行SSI扩展（参见其他帖子）。

Answer 4

我不完全确定你想要的是什么，但完全客户端方法是将它们嵌入<object>标签。

<html>
    <head>
        <title>About Us</title>
    </head>
    <body>
        <object data="header.html"><!--Something to display if the object tag fails to work. Possibly an iFrame--></object>
        <!--Content goes here...-->
        <object data="footer.html"></object>
    </body>
</html>

如果header.html或footer.html有javascript访问父文档，我认为这不会起作用。但是，以其他方式使用它可能是可能的。

Answer 5

对于没有动态内容但具有共同元素的网站，我使用Perl的Template Toolkit在我的开发机器上生成最终页面，并将生成的静态HTML文件上传到服务器。工作得很漂亮。

例如：

header.html中

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>[% title %]</title>
<link rel="stylesheet" href="/site.css" type="text/css">
<meta name="description" content="[% description %]">
<meta name="keywords" content="[% keywords.join(',') %]">
</head>

<body>

<div id="banner">
    <p>Banner</p>
</div>

footer.html

<address>
Last update:
[%- USE date -%]
[%- date.format(date.now, '%Y-%m-%d %H:%M:%S') -%]
</address>
</body>
</html>

aboutus.html

[%- INCLUDE header.tt.html
title       = 'About Us'
description = 'What we do, how we do it etc.'
keywords    = 'rock, paper, scissors'
-%]

<h1>About us</h1>

<p>We are nice people.</p>

现在，您可以使用tpage或ttree来构建网页。

Answer 6

查看ppk的网站（quirksmode.org），然后转到javascript档案，（http://quirksmode.org/js/contents.html）。他使用了一个名为sendRequest的ajax函数（在http://quirksmode.org/quirksmode.js找到）。由于IE9 +在标准方面表现不错，我将其简化为：

function sendRequest(url,callback,postData) {
    var req = new XMLHttpRequest();
    if (!req) return;
    var method = (postData) ? "POST" : "GET";
    req.open(method,url,true);
    req.setRequestHeader('User-Agent','XMLHTTP/1.0');
    if (postData)
        req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    req.onreadystatechange = function () {
        if (req.readyState != 4) return;
        if (req.status != 200 && req.status != 304) {
            //  alert('HTTP error ' + req.status);
            return;
        }
        callback(req);
    }
    if (req.readyState == 4) return;
    req.send(postData);
}

然后通过包装setFooter，setHeader函数和其周围的任何其他内容函数来使用sendRequest函数。

Answer 7

为什么不使用php或任何其他脚本脚本语言？

使用javascript执行此操作并非所有用户都允许观看您的网页。

Answer 8

虽然这可以通过JS以多种方式完成（AJAX，iframe插入），但在服务器端直接或（更好）更好地执行此操作将是一个非常糟糕的主意。

依赖于JS的页面的构图将不会在很大一部分用户的浏览器上完全呈现，同样重要的是google等人无法正确解释，如果他们喜欢的话。

你可以做，但请，请，请不要。

Answer 9

显然header.html和footer.html不是html文件 - 带有完整的标题等。如果你只有html片段并且想要包含它们，那么你可以创建不同的页面 - 比如aboutus.html，terms.html ，你有几个选择：

使用像Rails这样的框架 - 允许您使用布局和部分。 [**重**]
编写一个简单的工具，通过连接相应的文件生成所有文件。

我假设您这样做是为了避免重复页眉和页脚内容。

Answer 10

另一种方法是使用ajax来包含远程html文件。

Answer 11

框架集是在没有任何脚本或服务器端影响的情况下执行此操作的方法。

<frameset rows="100,*,100">
    <frame name="header" src="header.html" />
        <frame name="content" src="content.html" />
    <frame name="footer" src="footer.html" />
</frameset>

HTML5框架集：http://www.w3schools.com/tags/html5_frameset.asp

这是一个非常过时的解决方案，大多数网络主机将支持服务器端包含或您可以使用PHP来包含您的文件

http://php.net/manual/en/function.include.php

干杯

如何使用模板生成静态网页？

11 个答案:

header.html中

footer.html

aboutus.html