资讯专栏INFORMATION COLUMN

如何使用 HTML Imports

RobinTang / 1342人阅读

摘要:组件从第一次被引入,经历了漫长的过程。这种方法允许我们将文档导入到其他的文档中去。浏览器支持是一个非常新的技术以至于目前只有及以上才支持。即便如此,你还必须手动激活这个功能。在浏览器地址栏输入并访问然后启用然后重启即可使用。

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 文件;这只是另一种导入类型并且语法与导入样式表类似,在你的文档头部这样写:


获取内容

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

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

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

A Post Title

Written by: Admin

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.

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

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 也比较简单,一旦浏览器支持的话会发扬光大,希望它能成为一个常见的技术。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/49490.html

相关文章

  • 如何使用 HTML Imports

    摘要:组件从第一次被引入,经历了漫长的过程。这种方法允许我们将文档导入到其他的文档中去。浏览器支持是一个非常新的技术以至于目前只有及以上才支持。即便如此,你还必须手动激活这个功能。在浏览器地址栏输入并访问然后启用然后重启即可使用。 Web 组件从第一次被引入,经历了漫长的过程。其中某个组件可能真的会改变我们编写网站的方式,它就是 HTML Imports 。 这种方法允许我们将 HTML ...

    baukh789 评论0 收藏0
  • Angular(01)-- 架构概览

    摘要:正文架构概览正文架构概览接触大概一个月吧,期间写了个项目,趁现在稍微有点时间,来回顾梳理一下。里的模块,并不等同于项目中的模块概念。当然,这只是我目前阶段的理解。声明 本系列文章内容梳理自以下来源: Angular 官方中文版教程 官方的教程,其实已经很详细且易懂,这里再次梳理的目的在于复习和巩固相关知识点,刚开始接触学习 Angular 的还是建议以官网为主。 因为这系列文章,更多的会...

    bitkylin 评论0 收藏0
  • [译] 别再对 Angular Modules 感到迷惑

    摘要:大多数初学者会认为也有封装规则,但实际上没有。第二个规则是最后导入模块的,会覆盖前面导入模块的。 原文链接:Avoiding common confusions with modules in Angular showImg(https://segmentfault.com/img/remote/1460000015298243?w=270&h=360); Angular Modul...

    LMou 评论0 收藏0
  • 深度介绍:

    摘要:未来会使用来取代它,但是现在貌似还没有取代的方案,在新版的中这个功能已经被删除了,并且在使用的时候会在中给出警告。 嘿!看看这几年啊,Web 前端的发展可是真快啊!想想几年前,HTML 是前端开发者的基本技能,通过各式各样的标签就可以搭建一个可用的网站,基本交互也不是问题。如果再来点 CSS,嗯,金黄酥脆,美味可口。这时候再撒上几把 JavaScript,简直让人欲罢不能。 随着需求的...

    chadLi 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<