等价于 HTML 中的 include()

Posted 2023-02-22

【中文标题】等价于 HTML 中的 include()

【英文标题】：Equivalent of include() in HTML

【发布时间】：2011-04-25 02:34:56

【问题描述】：

我想知道是否有一种方法可以仅使用 html 将一些 html 内容包含在另一个 html 中？

php 的替代品

<?php include("file.php"); ?>

这可能吗？

编辑：

这引起了一些混乱，我需要的是“几乎是一个 html 标记”，它具有将 html 文档包含在另一个文档中的功能。

【问题讨论】：

@Trufa 我相信他在谈论 iframe 的 HTML5 seamless 属性（html.spec.whatwg.org/#attr-iframe-seamless），但目前对它的支持相当惨淡：caniuse.com/#feat=iframe-seamless

iframe seamless 是规范中的 removed。真可惜。

【参考方案1】：

你试过了吗：

<object type="text/html" data="file.html"></object>

【讨论】：

非常好，但我发现至少有一个缺陷：至少在 chrome 中，单击对象框架内的链接默认情况下会打开对象内部的新链接，而不是在浏览器中。在包含的文件中将链接目标设置为 target="_top" 是一种可能的解决方法。

另外需要说明的是JS和CSS文件需要调用两次，分别在主页面和被调用的html文件中

【参考方案2】：

它不能纯粹由 HTML 来完成。 （但是有 iframe，但我认为在这种情况下不符合条件。）

这可以使用 javascript 来完成。您通过 Ajax 获取另一个文件，并将其内容放在当前页面上的 HTML 元素中。

【讨论】：

我非常有限，我实际上是在 facebook 中要求 fmbl 标签页。

【参考方案3】：

我写的一个库的无耻插件解决了这个问题。

https://github.com/LexmarkWeb/csi.js

<div data-include="/path/to/include.html"></div>

上面将取/path/to/include.html的内容并用它替换div。

【讨论】：

谢谢。看起来像最终的解决方案！但是当我在本地（不是在 FTP 上）加载文件时，我从 Firefox 收到一个错误：跨域请求被阻止：同源策略不允许读取 file:////_topmenu2.html 处的远程资源。 （原因：CORS 请求不是 http）。 ​

【参考方案4】：

HTML 没有原生包含附加内容的功能。然而，大多数 Web 服务器确实有服务器端包含语句：SSI in Apache SSI in IIS

【参考方案5】：

唯一的就是一个纯 html 的 iframe。但您也可以使用 javascript 通过 ajax 获取页面并将其包含到您的 dom 层次结构中

【参考方案6】：

没有这样的事情。您必须使用服务器端脚本语言或 JavaScript 来执行此类操作。

【参考方案7】：

是的，但您需要在配置或 .htaccess 中启用它：

Options +Includes
AddType text/html .shtml
AddHandler server-parsed .shtml

当然，您需要将任何包含以下内容的文件重命名为 .shtml... 或者您可以直接使用：

Options +Includes
AddType text/html .html
AddHandler server-parsed .html

语法本身类似于注释：

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

【讨论】：

不，但它也不需要像 PHP 这样的东西。

这是一个服务器端包含，而不是纯 HTML。使用 JavaScript 可能同样容易，甚至更容易。

@tyler: 除了你正在移动客户端并生成一堆额外的请求......

但它确实需要其他东西！那为什么不使用PHP呢？

@Col Shrpel：好吧，我也会使用 php，但关键是它本质上是内置于 Apache 和 IIS 中的，因此它不需要安装第 3 方模块。那将是唯一的原因。但实际上，谁没有安装 PHP？这对我来说也没有意义......但我没有问这个问题:-)

【参考方案8】：

如果你使用的是 Apache，你可以试试Server Side Includes。

【参考方案9】：

这可能晚了几年，但我就是这样做的！

在第一行之后放这一行！

<SCRIPT LANGUAGE="JavaScript" src="http://yourdomain.com/header.js">

然后创建一个名为“header.js”的文件并输入您要包含的文件的内容！ 就这样……

<!-- Begin
document.write('<center>');
document.write('<a href="http://alinktosomewhere.co.za">a link 1</a>');
document.write('<a href="http://alinktosomewhere.co.za">a link 1</a>');
document.write('<a href="http://alinktosomewhere.co.za">a link 1</a>');
document.write('<a href="http://alinktosomewhere.co.za">a link 1</a>');
document.write('<hr>');
document.write('</center>');
// End -->

希望有帮助！

【讨论】：

一个缺点是没有启用 JavaScript 的用户将看不到这样写的内容。目前包括搜索引擎爬虫，因此内容不会出现在搜索引擎中。

好吧... thnx 没想到！ t

不知道为什么会有这么多反对意见。它和这里的大多数解决方案一样好。

【参考方案10】：

差不多10年过去了，可能还有人对此心存疑虑。因此，我将解释我们在 2020 年今天拥有的一个简单解决方案。

我总是使用 jquery .load() 函数，从来没有遇到过问题。

Exemple: ( "#content" ).load( "includes/menu.html" );

【讨论】：

如果 HTML 文件位于防火墙内的另一台服务器上怎么办？换句话说，由我们控制的内容服务器。

【参考方案11】：

Html 中缺少 Include\Import 真是令人沮丧！

如果不支持“PHP”，一个不错的选择是“服务器端包含 (SSI)”！

几乎所有（如果不是全部）网络主机服务器都支持 SSI！

<!--#include virtual="layout.html" -->

包含上述行的文件必须以“.shtml”或“.shtm”扩展名结尾！

---

浏览器本身无法执行 Include\Import 这样简单的操作，这真的很烦人！

与 php 或 Node.js 一样，任何浏览器都应该支持在 HTML 加载过程开始之前使用 Javascript 本身对 html 进行预处理！