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

将HTML片段插入HTML5导入的主HTML文件的正确方法是什么？将HTML包含到其他带有Web组件的HTML中

的答案，更通用的问题https://stackoverflow.com/a/22142111/239247提到，这是可以做到的：

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

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

来源

2015-07-10 anatoly techtonik

你看http://www.w3schools.com/ tags/tag_iframe.asp – Garry

这是实验性的。你可能不得不采取像http://api.jquery.com/load/ –

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

它说：

HTML在未来的HTML包括。不幸的是，在HTML中包括HTML的一部分还没有被HTML支持。

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

编辑：如果你能够，我会使用PHP，这是接近的清洁程度。我所包含的链接显示了多种方法来做你正在做的事情。

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

来源

2015-07-10 19:30:57 Snappawapa

http://www.w3fools.com/说这个网站不能被信任。 –

@techtonik它一直是我的一个很好的资源。只是说。我没有看到人们的问题。 – Snappawapa

不确定他们的信息是否是最新的。 –

我发现做到这一点的方法是使用ASP.NET和.cshtml文件，并使用剃刀，如下所示： http://weblogs.asp.net/scottgu/asp-net-mvc-3-layouts 除了简单地将HTML插入到其他HTML中，这也可以让你有一致的导航栏，页脚等，并最大限度地减少你的代码配置文件。此外，布局文件的使用为网站提供了一种更好的感觉，因为当点击内部链接时，只有网站的一部分会刷新，而不是整个网站。

来源

2015-07-10 20:04:29 WookieCoder

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

找到一种方法可以做到这一点从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 =/

来源

2015-07-14 07:44:02

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

回答

相关问题