批量导入文件夹到另一文件夹_使用HTML导入将HTML文件包含到另一个文件中

HTML是构成网页的标准语言，但是要扩展或维护它并不容易。 我们需要另一种语言作为使我们能够动态生成HTML的层。 HTML导入是一个新的标准模块，旨在使HTML更加灵活。

HTML导入允许我们将一个HTML文件包含到另一个HTML文件中。 我们还可以访问和重用其中的内容。 这是一个令人兴奋的新功能，可能会在未来十年内（也许）改变我们构建HTML的方式。

但是，在撰写本文时，HTML Import仍处于“工作草案”阶段，Chrome（v36及更高版本）是唯一支持该功能的浏览器。

但是请注意，此功能已被deault禁用。 要在Chrome中启用HTML导入，请转到 chrome：// flags 页面，启用“启用HTML导入”选项，然后重新启动Chrome 。 让我们开始尝试HTML导入。

如何使用HTML导入

包含HTML模板与包含样式表的方法类似，我们使用<link>标记。 但是，我们不使用rel=stylesheet ，而是使用rel=import添加了link标记。 例如，在这里，我将包含一个名为template.html的模板 （我在其中添加了几行虚拟内容）。

<link rel="import" href="template.html">

现在，如果通过“ 网络”选项卡下的Chrome DevTools查看网页，则可以看到浏览器（Chrome）加载了template.html 。

请记住，导入的文件中的内容不会立即附加到主HTML文件中。 当您看到主要HTML文件时，此刻您什么也看不到。

重用内容

要将内容附加到文件中，我们需要编写几行JavaScript。 通常，我们可以将脚本放在head标签中。 但是在这种情况下，我们可以在主体中添加脚本。 另外，为了使以下脚本起作用，我们必须将其放在rel=import 。 我们必须确保rel=import中的内容已在脚本之前被浏览器完全加载，以便脚本能够识别该文件中的元素，元素的ID或类。

首先，我们选择带有此代码的模板文件。

var getImport = document.quearySelector('link[rel=import]');

这将选择所有带有rel=import的link标记。 您可能会导入多个HTML文件，并且只想选择一个特定的链接标签，您可以将id添加到链接标签中，然后使用该id而不是使用link[rel=import] ，如上所示。

例如，假设您导入文件，如下所示：

<link rel="import" id="template-file" href="template.html">

您可以将代码替换为：

var getImport = document.querySelector('#template-file');

选择文件后，我们需要选择要添加到主文件的内容。 如果您的内容用id="content"包装，则可以通过这种方式选择内容。

var getContent = getImport.import.querySelector('#content');

现在，我们可以使用JavaScript appendChild()方法将内容追加到body 。

document.body.appendChild(document.importNode(getContent, true));

内容现在应该出现在主文件中。

使用样式表

与我们添加内容的方式相反，放入导入文件中的样式表将直接影响主要内容。 在这里，我们在模板文件中添加了style.css，其中包含以下代码，这些代码应将段落颜色更改为红色。

p {
	color: red;
}

样式立即生效，如下所示。

• 观看演示
• 下载源

最终思想

HTML导入对于构建模块化且可维护的网页很有用。 但是，请记住，如果SEO很重要，则使用HTML导入的此方法可能不合适。 内容是使用JavaScript附加的，对于搜索引擎抓取工具是不可见的 。 谨慎使用HTML导入，仅用于将其他或辅助内容添加到您的网页。

翻译自: https://www.hongkiat.com/blog/html-import/