等价于 HTML 中的 include()

Posted 2023-02-21

【中文标题】等价于 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】：

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

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

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

【讨论】：

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

【参考方案2】：

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

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

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

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

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

---

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

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

【参考方案3】：

你试过了吗：

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

【讨论】：

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

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

【参考方案4】：

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

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）。 ​

【参考方案5】：

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

在第一行之后放这一行！

<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

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

【参考方案6】：

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

【参考方案7】：

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

【参考方案8】：

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

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

【讨论】：

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

【参考方案9】：

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

【参考方案10】：

是的，但您需要在您的配置或 .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？这对我来说也没有意义......但我没有问这个问题:-)

【参考方案11】：

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