我正在寻找一种简单的方法来使我的网站模块化,并将经常出现的常见部分(如页眉和页脚)提取到单独的文件中。
就我而言,我不能使用任何服务器端包含,例如.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>
标签与使用<iframe>
非常相似。两者都只是将网页作为单独的文档加载到框架中,该框架本身是主文档的子级。
框架在Web开发的早期曾经非常流行,然后以<frame>
标签的形式出现。但是,它们通常不受欢迎,您应该尽可能少地使用它们。
为什么不使用这种技术来显示您自己的内容
子框架中的 HTML 内容无法与父框架通信。例如,不能使用父 HTML 中的脚本与子项通信,反之亦然。这使得当您想要显示除静态文本以外的任何内容时,它对于提供自己的内容不是很有用。
为什么不使用这种技术来显示其他人的内容
您也不能使用它来提供大量外部内容。许多网站(包括例如。SO) 发送一个X-Frame-Options
标头以及具有值的网页SAMEORIGIN
.这会阻止加载和显示您的内容。