如何使用 HTML Imports

Web 组件从第一次被引入,经历了漫长的过程。其中某个组件可能真的会改变我们编写网站的方式,它就是 HTML Imports 。

这种方法允许我们将 HTML 文档导入到其他的 HTML 文档中去 。 它可以通过 Ajax 实现,不过 HTML Imports 是一个更干净的方法 。

浏览器支持

HTML Imports 是一个非常新的技术以至于目前只有 Chrome 31 及以上才支持。即便如此,你还必须手动激活这个功能。在浏览器地址栏输入并访问 chrome://flags 然后启用 "Enable HTML Imports" 然后重启即可使用 。

幸运的是还有个 Polyfill for HTML Imports ,你可以在 Github 找到它。

使用 HTML Imports

想想看,我们已经使用 imports 来引入样式表和 JS 文件;这只是另一种导入类型并且语法与导入样式表类似,在你的文档头部这样写:

<link href="import/post.html" rel="import" />

获取内容

当你导入一个 HTML 文件你其实希望浏览器去获取你想要的内容, 但它不会自动得在文档上展现;为此你需要编写一些简单的 JavaScript 代码。为了获取导入的 HTMl 的内容你可以这么写:

var post = document.querySelector('link[rel="import"]').import;

这段代码会获取到我们导入的 post.html 文件,假设 post.html 文件内容如下:

<article class="post">
<h2>A Post Title</h2>
<p><span>Written by: Admin</span></p>
<p>If you run a business and want a professional first point of contact or just need a hand with some of the day to day to business tasks because things are getting a bit busy, then we can help.</p>
</article>

我们需要获得导入页面的内容然后将文章部分放到我们的页面上:

var post = document.querySelector('link[rel="import"]').import;
var article = post.querySelector('.post');
document.body.appendChild(article.cloneNode(true));

我们也可以利用专门为这种需求设计的模版元素,按需导入部分模版。 在这个案例中唯一不一样的是我们会将元素导入到一个容器中,而不是 body ,这样能更好的适配我们的app。基本都是做选择然后执行一小段 JS ,要将 HTML 插入到某个元素里你可以这样写:

var post = document.querySelector('link[rel="import"]').import;
var article = post.querySelector('.post');
var clone = document.importNode(article.content, true);
document.querySelector('#container').appendChild(clone);

如你所见,这个案例不同的地方在于它先克隆了元素,然后附加到了某个元素里。

总结

HTML Imports 给予我们一个很棒的方法来构建更好的网站以及组织应用,它的 API 也比较简单,一旦浏览器支持的话会发扬光大,希望它能成为一个常见的技术。

tieshou wang

Read more posts by this author.

Subscribe to 王铁手的博客

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!