（使用 <object> 标签嵌入 HTML 页眉/页脚的缺点？答案

【问题标题】：(Dis-)advantages of embedding HTML header/footer with <object> tags?（使用 <object> 标签嵌入 HTML 页眉/页脚的缺点？
【发布时间】：2017-07-15 12:05:24
【问题描述】：

我正在寻找一种简单的方法来使我的网站模块化并将经常出现的常见部分（如页眉和页脚）提取到单独的文件中。

就我而言，我不能使用任何服务器端包含，例如php。我通常也希望避免仅仅为了这样一个简单的任务而包含像 JQuery 这样的大型库。

现在我遇到了https://stackoverflow.com/a/691059/4464570，它建议简单地使用 HTML <object> 标记将另一个 HTML 文件包含到页面中，如下所示：

<object data="parts/header.html" type="text/html">header goes here</object>

我可能在这里遗漏了一些重要的东西，但对我来说，这种方式似乎完全符合我的需求。它非常简短和精确，所有浏览器都很好地支持<object> 标签，我不需要包含任何大型库，实际上我什至不需要任何 JavaScript，这允许用户阻止它仍然查看正确的页面结构和布局。

那么，我目前还没有意识到这种方法有什么缺点吗？我怀疑的主要原因是，在几十个关于如何包含 HTML 片段的答案中，只有一个推荐 <object>，而其他所有答案都是 PHP 或 JavaScript/JQuery 方式。

此外，关于如何将<object> 标签放入我的主页，或者我想以这种方式包含的文件的结构，我是否需要注意任何特别之处？比如，嵌入文件可能是一个完整的 HTML 文档，包含 <!DOCTYPE>、<html>、<head> 和 <body>，或者我应该/必须剥离所有这些结构并只留下内部 HTML 元素？在以这种方式嵌入的 HTML 中使用 JavaScript 或 CSS 有什么特别之处吗？

【问题讨论】：

标签： html object-tag

【解决方案1】：

对 HTML 内容使用<object> 标记与使用<iframe> 非常相似。两者都只是将网页作为单独的文档加载到框架内，该框架本身就是主文档的子级。

框架在 Web 开发的早期非常流行，后来以 <frame> 标记的形式出现。但是，它们通常不受欢迎，您应该尽可能少地使用它们。

为什么不使用这种技术来显示您自己的内容

子框架中的 HTML 内容无法与父框架通信。例如，您不能使用父 HTML 中的脚本与子 HTML 进行通信，反之亦然。当您想要显示除静态文本之外的任何内容时，这对于提供您自己的内容并不是很有用。

为什么不使用这种技术来显示别人的内容

您也不能使用它来提供大量外部内容。许多网站（包括例如 SO）发送一个 X-Frame-Options 标头以及其值为 SAMEORIGIN 的网页。这会阻止您的内容被加载和显示。

【讨论】：