logo标签列表

HTML中的include()等效方法

phphtmlfunctionincludeserver-side-includes
28

我想知道是否有一种只使用HTML就能将一个HTML内容嵌入到另一个HTML中的方法？

这是PHP的一种替代方法。

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

这种情况是否可能？

编辑:

这引起了一些混淆，我需要的是“几乎是HTML标签”的功能，可以在另一个HTML文档中包含它。

4
@Trufa 我认为他在谈论HTML5中的seamless属性，用于iframes（https://html.spec.whatwg.org/#attr-iframe-seamless），但目前对它的支持非常糟糕：http://caniuse.com/#feat=iframe-seamless - waldyrious
2
"iframe seamless"已经从规范中删除，真遗憾。 - user
12个回答
39

你尝试过：

<object type="text/html" data="file.html"></object>
3
很好，但我发现至少有一个缺陷：在Chrome浏览器中，点击嵌套框架内的链接默认情况下会在对象内打开新链接而不是在浏览器中打开。在包含文件中将链接目标设置为target="_top"是一种可能的解决方法。 - Darren Ringer
另一个需要注意的是，您需要在主页面和被调用的HTML文件中分别调用JS和CSS文件。 - Ayoub Laazazi
23

这不能仅通过HTML完成。（然而，有iframes可以实现，但我不认为在这种情况下它符合要求。）

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

我很局限，实际上是在寻求 Facebook 中的 fmbl 标签页。 - Trufa
14

我写的一个库，可以无耻地打广告解决这个问题。

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）。 - Gabriel
一样，我也遇到了一个“XMLHttpRequest”错误：“来自'null'的源已被CORS策略阻止：跨源请求仅支持协议方案：http、data、isolated-app、chrome-extension、chrome、https、chrome-untrusted。”不过你的尝试很好，我会继续测试。 - jacktrader
7

HTML本身没有原生的包含附加内容的功能。但是大多数Web服务器都有服务器端包含语句：
Apache中的SSI
IIS中的SSI

6

唯一的方法就是使用纯HTML的iframe。但你也可以使用JavaScript通过ajax获取页面并将其包含到你的DOM层次结构中。

4

是的，但您需要在配置文件或.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那样的东西。 - prodigitalson
这是服务器端包含，不是纯HTML。使用JavaScript可能同样容易，甚至更容易。 - Tyler Treat
1
@Col Shrapel：我也会使用PHP，但关键是这个功能本质上已经内置在Apache和IIS中了，所以不需要安装第三方模块。这可能是唯一的原因。但实际上，谁没有安装PHP呢？这对我来说毫无意义...但我并没有问这个问题 :-) - prodigitalson
@Shrapnel 上校：我认为 OP 想要避免使用服务器端解决方案，出于某种原因。如果我处在他的位置，当然会使用 PHP。 - Tyler Treat
但它需要其他东西，需要Apache，PHP也需要它。PHP还增加了更多的要求。 - skywalker
显示剩余2条评论
3

这是不可能的。您需要使用服务器端脚本语言或JavaScript来完成此类操作。

3
如果您正在使用Apache，可以尝试使用"服务器端包含(Server Side Includes)"功能。具体操作请参考这里。
2
这可能晚了几年，但这是我做的方式！
在第一行 `` 标签后加入这行代码！
<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 -->

希望这能帮到你！
2
一个缺点是没有启用JavaScript的用户将无法看到像那样编写的内容。目前包括搜索引擎爬虫，因此内容不会显示在搜索引擎中。 - Paul D. Waite
1
好的...谢谢，我没有考虑到那个！ - Cavemanharris
不知道为什么这个回答会有这么多的踩。它和这里的大部分解决方案一样好。 - EML
2

时至今日，近10年过去了，有些人可能仍然对此存在疑虑。因此，我将解释一个简单的解决方案，该方案在2020年已经成熟可行。

我一直使用jquery的.load()函数，并且从未遇到问题。

Exemple: ( "#content" ).load( "includes/menu.html" );
如果HTML文件位于防火墙内的另一台服务器上怎么办？换句话说，这是我们控制的内容服务器。 - Brett Slocum
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接