为啥 HTML5 不包含将本地 HTML 加载到文档中的方法？
Posted
技术标签:
【中文标题】为啥 HTML5 不包含将本地 HTML 加载到文档中的方法？【英文标题】：Why does HTML5 not include a way of loading local HTML into the document?为什么 HTML5 不包含将本地 HTML 加载到文档中的方法？ 【发布时间】：2011-10-16 01:36:08 【问题描述】：我最近一直在思考这个问题。为什么 html5不是真的让您将 HTML 加载到文档中以分解您的 HTML 文件？
它支持几乎所有其他资产（图像、视频、音频）。
是的，我们有 iframes、embeds 和 objects，但它们是沙盒的，不遵循文档其余部分的流程。
我在想这样的事情：
<h2>My wonderful application</h2>
<include src = "leftPane.html" type = "text/html" />
<include src = "main.html" type = "text/html" />
<include src = "footer.html" type = "text/html" />
我希望有人向我解释这一点。在我们制作的几乎每一个 Web 应用程序中，我们都使用某种形式的模板来分解我们的 HTML，那么为什么 HTML5 不只是包含它呢？
我很感激你的（无火焰的）想法。
马特
【问题讨论】：
不是答案，但我确实在今年早些时候写了一个小书签，它在服务器上禁用该功能的页面上解析了 SSI：Client Side Server Side Includes。几个网站（例如 Twitter）正在迁移到 templates are defined in javascript 的模型。重点是，已经有很多方法可以在不增加 HTML 复杂性的情况下实现这一点。 感谢您的报道。是的，我也喜欢<script src = "..." type = "text/template"></script>，但我认为它应该只应用于非常小的重复片段（即收件箱中的消息）。我只是喜欢像 php 或其他模板语言那样轻松地拆分我的 HTML 的想法。我同意这会增加复杂性，但添加<video> 标签也会增加复杂性——我们之前有很多闪存解决方案，但与原生支持相比，它们仍然显得很老套。我觉得我们今天的服务器端模板解决方案似乎仍然是解决一个常见问题的方法。
【参考方案1】：
它还不是真正的官方，但它看起来像 Web 组件，一个允许导入的新概念，类似于您描述的方式，可能会在不久的将来添加到 HTML 规范中。它的行为并不完全符合您的要求——正如 Barry Kaye 指出的那样，这会产生一些问题——但它采用了这个想法并解决了这些问题。
您可以在此处查看有关该概念的当前工作草案：http://w3c.github.io/webcomponents/spec/imports/
我还在这里找到了这篇可能更容易理解的文章（它适合我）： http://www.html5rocks.com/en/tutorials/webcomponents/imports/
我知道这主要是一个理论上的回答，但它也是一个理论上的问题；）。
【讨论】：
这没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方发表评论 - 您可以随时评论自己的帖子，一旦您有足够的reputation，您就可以comment on any post。【参考方案2】：另一种方法是使用jQuery和标签
http://irtazaali.wordpress.com/2013/01/16/how-to-include-html-text-from-another-file-into-an-html5-page/
【讨论】：
【参考方案3】：问了类似的问题，有可能：HTML5 include file
拉法的回答：
使用object标签：
<object name="foo" type="text/html" data="foo.inc"/>
foo.inc 应该包含有效的 HTML。
我在 Konqueror、Firefox 和 Chromium 上对其进行了测试。
如果您觉得它有用（我愿意），请支持 Rafa 的回答（不是我的），因为“不可能”像疾病一样传播。
【讨论】：
生成的 DOM 树不像包含的文件被文本替换。包含 和 标记的整个文档被插入到包含文档中。 +1 但W3C validator 不喜欢它，并且“包含”之后的东西没有显示（在 Chrome 中，我没有测试其他浏览器）。 W3C 反对自闭标签。我用结尾</object> 替换了它，它验证并显示了以下内容。【参考方案4】：
HTML5 由 3 个组件组成：HTML、CSS 和 JavaScript。所以我们必须使用所有这些来利用 HTML5。
外部 HTML 代码可以使用 javascript 包含在另一个 html 文档中。唯一的事情是，您必须将外部代码存储在 .js 文件中。这是一个如何包含 html 段落的示例：
<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>
<script type="text/javascript" src="include_html.js"></script>
</head>
<body>
<script type="text/javascript">
paragraph();
</script>
</body>
</html>
include_html.js 的内容
function paragraph()
document.write("<p> This is an HTML paragraph </p>");
【讨论】：
【参考方案5】：不，每个请求都不需要往返服务器，如果模板的内容不变，那么它可以被缓存并且需要传输的数据更少。这就是为什么您将 css 和 javascript 放在单独的文件中的原因。
【讨论】：
有时人们不理解将 CSS/JS 保存在自己的文件中的基本原因，这有时令人沮丧。【参考方案6】：事实证明，这已出现在 WHATWG 邮件列表中：Client-side includes proposal：Shannon 准确地提出了您所说的，解析器在加载文档片段时必须阻止的地方。 Ian Hickson 拒绝了它，因为延迟成本太高。此外，这是许多 Web 服务器已经提供的简单功能，因此被认为不值得。
您可能希望使用seamless attribute of iframe 进行调查，这会导致将完整文档放置在文档中，但其行为类似于任何块元素（从主文档继承样式）。不过，我认为它还没有被许多浏览器支持。
【讨论】：
哇。这可能正是我想要的。你知道seamless 属性上的浏览器支持（如果有的话）吗？
#Matt 浏览器支持总结请查看link【参考方案7】：
每个请求当然都需要往返服务器 - 您能想象这可能导致的带宽问题吗？上面的 sn-p 会有 4 个请求（原始页面 + 3 包括），然后当然是浏览器渲染问题，然后是本地 JS 问题（即 DOM 在什么时候加载 - 你有 4 个 DOM 吗？ )。
【讨论】：
感谢您的回复，但我认为这与加载 3 张图片没有什么不同。我们通过精灵来避免这种情况，但您仍然有选项来加载 3 个图像并发出 3 个往返请求。 哦，关于 DOM 加载。这可能是一个公平的观点，但就像在任何其他模板语言中一样，HTML 是首先呈现的。现在，如果解析器必须执行 2 次传递，这可能确实会成为性能问题。对于任何呈现 html 然后提供它的 Web 模板语言，同样的事情。 @Matt - 你对每个 HTML 包含的想法有什么看法 - 它们是否应该是具有自己的 CSS 和 JS 引用的完整 HTML 文档？ 不 - 更像是片段。目前 iframe、object 和 embed 为完全形成的 HTML 文档提供了解决方案。在现代浏览器中，您可以将链接和脚本标签放在任何您喜欢的地方，它会呈现它们。但是，我认为您的片段中不会建议您这样做，就像您在其他模板语言中不建议一样。 此外，如果片段是可缓存的内容，则不会有往返。以上是关于为啥 HTML5 不包含将本地 HTML 加载到文档中的方法？的主要内容，如果未能解决你的问题，请参考以下文章
为啥 Android WebView 不加载 youtube HTML5 iframe 视频？
为啥 xpra html5 客户端不显示客户端的本地打印机而常规 xpra 桌面客户端会显示？
使用 JavaScript 从本地 HTML5 Web 应用程序加载 JSON