将外部 HTML 文件包含到另一个 HTML 文件中[重复]

Posted 2023-03-05

【中文标题】将外部 HTML 文件包含到另一个 HTML 文件中[重复]

【英文标题】：Including external HTML file to another HTML file [duplicate]

【发布时间】：2013-06-13 10:57:09

【问题描述】：

如何将外部 html 文件插入到我的文件中？

例如：

<div id="header">

       Here show the external HTML code in the file, for example: name.html

</div>

非常感谢！

【问题讨论】：

在制作新问题之前请检查类似的问题，我相信这个问题已经被问过很多次了。

如果还有其他问题有更好的答案，有人可以链接到他们吗？谢谢

@kapa 我投票重新打开，因为（1）链接的问题询问最佳实践，而这个问题询问了一个实用的操作方法问题，（2）链接的问题是关于模板通用的，这个特别是关于包含外部文件的内容（除了模板之外还有其他用途），（3）那个问题和这个问题的答案完全不同，几乎没有重叠。

为了扩展第 (2) 点，我需要知道如何包含外部文件，以便在 Anki 的抽认卡之间共享内容。另一个问题中的答案都不相关，因为它们都假设使用浏览器（例如使用 javascript）或网络服务器（例如使用 php）。此问题及其答案适用于网站以外的静态 HTML。

重复Include another HTML file in a HTML file

【参考方案1】：

另一种方法是使用对象标签。这适用于 Chrome、IE、Firefox、Safari 和 Opera。

<object data="html/stuff_to_include.html"> 
    Your browser doesn’t support the object tag. 
</object>

更多信息在 http://www.w3schools.com/tags/tag_object.asp

【讨论】：

这会导致 hrefs 出现问题。它们默认加载在对象的框架内。您需要将 hrefs 目标标记为父 ***.com/a/1037870/852806

这行得通，但是我的 div 在 stuff_to_include.html 中的所有 CSS 都被忽略了。如何将样式恢复到它上面？

@Robbie 你找到解决办法了吗？

【参考方案2】：

您可以为此使用 jquery 加载。

<script type="text/javascript">
$(document).ready(function(e) 
    $('#header').load('name.html',function()alert('loaded'));
);
</script>

不要忘记在上面的代码之前包含 jquery 库。

【讨论】：

虽然技术上是正确的（这确实会加载一个外部 HTML 文件），但这就像用反铲进行肾脏手术一样。由于这个问题甚至没有被标记为 jQuery，因此这建议出去并使用反铲来进行肾脏手术——甚至更糟。

【参考方案3】：

您正在寻找<iframe> 标记，或者更好的是，一种服务器端模板语言。

【参考方案4】：

iframe element。

<iframe src="name.html"></iframe>

但您想要出现在多个页面上的内容最好处理using templates。

【讨论】：

但是这样我看到了源代码吧？因为我的目的是：我的页眉、菜单和页脚出现在许多其他 HTML 文件中。为了不重复代码，我更喜欢为每个部分编写一个 HTML，然后将其加载到页面中（这样维护更容易）。

"***.com/a/16132516/19068" — 仅当您查看源代码时。

"因为我的目的是：我的页眉、菜单和页脚出现在许多其他 HTML 文件中。" — 然后使用模板而不是 HTML 功能。