将 HTML 包含到其他带有 Web 组件的 HTML 中答案

【问题标题】：Include HTML into other HTML with web components将 HTML 包含到其他带有 Web 组件的 HTML 中
【发布时间】：2015-07-10 19:28:23
【问题描述】：

使用 HTML5 导入将 HTML sn-p 插入主 HTML 文件的正确方法是什么？

更一般的问题https://stackoverflow.com/a/22142111/239247的答案提到可以这样做：

<head>
  <link rel="import" href="header.html">
</head>

但这不起作用。我不需要插入 JS 和 CSS。仅在 <body> 顶部插入纯 HTML 标记。要做到这一点并保持 HTML 可读性，最简单的方法是什么？

【问题讨论】：

你有没有看w3schools.com/tags/tag_iframe.asp
这是实验性的。你可能不得不求助于api.jquery.com/load

标签： html web-component

【解决方案1】：

我发现这样做的方法是使用 ASP.NET 和 .cshtml 文件并使用 razor，如下所示： http://weblogs.asp.net/scottgu/asp-net-mvc-3-layouts 除了简单地将 html 插入其他 html 之外，这还允许您拥有一致的导航栏、页脚等，并最小化您的代码配置文件。此外，使用布局文件可以让网站感觉更好，因为当您点击内部链接时，只有网站的一部分会刷新，而不是整个网站。

【讨论】：

ASP.NET 不是 HTML5 Web 组件标准。

【解决方案2】：

从html5rocks 找到了一种方法来做到这一点，但它远非可读。这是理想的方式：

<body>
  <include src="header.html"/>
</body>

这就是 HTML5 导入的实现方式：

<head>
  <link rel="import" href="header.html">
</head>
<body>
  ...
  <script>
    document.body.appendChild(
      document.querySelector('link[rel="import"]')
        .import
        .querySelector('body')
        .cloneNode(true));
  </script>
</body>

注意事项：

如果header.html 和footer.html 都存在，不清楚如何选择包含
需要querySelector('body') 以避免Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Nodes of type '#document' may not be inserted inside nodes of type 'BODY'.
不清楚如何在没有标签本身的情况下插入<body>标签内容
HTML5 导入在 Firefox 中不起作用 (38) http://caniuse.com/#feat=imports =/

【讨论】：

【解决方案3】：

见：http://www.w3schools.com/angular/angular_includes.asp

上面写着：

HTML 包含在未来的 HTML 中。不幸的是，在 HTML 中包含 HTML 的一部分（还）不被 HTML 支持。

所以这是在路上，但还没有。

编辑：如果可以的话，我会使用接近清洁度级别的 PHP。我包含的链接显示了多种方法来做你想做的事情。

后期编辑：如果它仍然重要（对于那些担心采购的人）：http://caniuse.com/#feat=imports

【讨论】：

@techtonik 这对我来说一直是一个很好的资源。只是说。我看不出人们对此有什么问题。
再一次，一直是我的。我相信他们。
此信息更新时没有数据，所以我没有理由相信他们。