利用废弃的html rel import实现页面include功能

这篇文章发布于 2021年07月22日,星期四,00:08,归类于 HTML相关, JS实例。 阅读 5019 次, 今日 1 次 7 条评论

 

HTML代码片段

一、废物利用

HTML imports正式被废弃了,瞧瞧看,万里河山一片红,要是股市也这样就好了。

HTML Imports被废弃

通常,看到web特性飘红心情会沮丧。

但是,这一次,乾坤大挪移,上下大颠倒,看到HTML imports没有任何浏览器支持,反而很开心。

因为,这意味着,我可以放心使用废弃的HTML imports语法实现我想实现很久的一个功能,那就是静态HTML页面的模块inlucde功能。

inlucde功能实现想法

当年HTML imports出现的时候,我老兴奋了,兴奋地晚上都睡不着觉,以为和PHP或者.NET等语言一样,直接一行代码,就可以把公用的头部和尾部引入进来。

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

后来一深入,心凉到了冰点,丫的完全就不是干这个事情的,是用来引入自定义元素的,Web Components开发使用的,3年前的这篇文章后半部分有介绍。

然后熬啊熬,终于把HTML imports给熬死了,嘿嘿嘿,既然现在HTML imports没人管了,那我想怎么玩就怎么玩了。

也就是实现这样的能力,引入下面这段HTML:

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

刷新页面的时候,这个位置自动呈现header.html对应的HTML内容,是完整呈现。

可以实现吗?自然可以,且代码很短。

二、扩展link元素的能力

我们可以在<link>元素上扩展一个内置自定义元素,自动拉取href属性对应内容。

语法如下:

<link rel="import" href="header.html" is="ui-import">

也就是如果<link>元素设置了is="ui-import",就加载header.html对应的HTML内容并显示在页面上。

核心JS代码其实很简单:

class HtmlImport extends HTMLLinkElement {
    constructor () {
        super();
    }
    static get observedAttributes () {
        return ['href'];
    }
    load () {
        fetch(this.href).then(res => res.text()).then(html => {
            this.style.display = 'block';
            this.innerHTML = html;         
        });
    }
    attributeChangedCallback () {
        this.load();
    }
}
if (!customElements.get('ui-import')) {
    customElements.define('ui-import', HtmlImport, {
        extends: 'link'
    });
}

就上面这点代码,就可以实现html include的能力了,此时<link>元素无论是默认存在,还是JS DOM创建,还是HTML字符串创建,只要出现在页面中,就会显示href对应的HTML内容。

眼见为实,您可以狠狠地点击这里:HTML rel=”import”引入header.html demo

可以看到如下图所示的样式效果,这部分内容就是其他文件引入进来呈现的:

载入实际效果示意

此时的HTML代码是这样的,加载的HTML会作为子元素在<link>元素中显示:

HTML结构截图示意

哈哈哈,从今往后,静态的demo演示、静态HTML文档页面有救了,不再需要其他工具生成了,万岁,撒花。

由于使用的是内置自定义元素实现的,因此,本方法IE浏览器不支持,其他现代浏览器都支持(Safari浏览器需要引入一段polyfill)。

三、开源啦,代码自取

为了方便大家学习和使用,相关代码我开源到了gitee上了,猛击这里:https://gitee.com/zhangxinxu/html-import

文件简单标注说明如下图所示:

gitee项目文件标注示意

该项目中的html-import.js也更加详细些,尤其是对于错误的处理,已经增加了几个事件的处理。

例如,我们希望资源加载完毕后做什么事情,就可以使用load事件,例如:

<link rel="import" id="myLink" href="header.html" is="ui-import">
myLink.addEventListener('load', function () {
    console.log('加载成功并结束触发');
});

还提供了出错的error事件支持:

myLink.addEventListener('load', function (event) {
    console.log('加载出错触发');
    // event.detail中包含出错信息
});

更细节的案例可以访问test.html

对了,别忘记关注我的gitee账号,不定期更新带实验性质的小玩意。

为什么不去Github?

因为gitee速度很快,体验很好,不要担心哪天因为外部环境原因代码折损。

四、重视安全性

安全重于泰山,虽然可以在HTML页面中引入公用HTML片段很爽,但是千万要保持警惕,不要指向第三方的不信任的地址哦~

不过好在这里的HTML写入使用的是innerHTML方法,并不会执行内联的script,但是,style样式还是会执行的,万一对方使用CSS对页面进行攻击呢?

如果希望script执行

如果希望script执行,则有下面两种方法:

1. 遍历script标签并进行处理;
2. Range相关方法解析HTML字符串(具体实现在“盘点HTML字符串转DOM的各种方法”这篇文章有介绍);

当然,也可以通过新增一个自定义属性的方式,让html-import.js默认就支持这种能力,比方说eval属性,也就是下面这种语法就会解析href对象内容里面的script脚本代码。

<link rel="import" href="header.html" is="ui-import" eval>

不过这并不是强需求,如果呼声较大,我可以抽空加一下,现在就先保持这样。

五、结语-里程碑

什么里程碑呢,那就是文章的id已经五位数了,本文的ID值是10009,看了下,十几年来,写了快800篇原创技术文章了,加起来有几百万字了。

没有什么窍门,就是坚持写。

其实呢,大家只要能够持续把一件事情做好,就很了不起,很出色了,超过90%以上的人了。

好了,不鸡汤了,困了。

如果大家经常与HTML页面为伍,则本文的内容可以尝试下。

对了,想到了docsify,docsify也是有显示静态公用内容的能力的,但是呢,不够灵活,要按照特定规则来。

对于前端比较熟练的人来说,还是直接用到哪,哪儿include下最好。

好,以上就是全部内容了,如果觉得对你的学习或者工作有所帮助,欢迎转发,欢迎分享,比心~

(本篇完)

分享到:


发表评论(目前7 条评论)

  1. mfk说道:

    需要slot功能。比如

    ==template.html

    通用代码

    菜单代码

    footer代码
    通用js代码

    使用时
    ===1.html

    页面css

    页面js

    页面body

    最终渲染结果

    通用代码
    页面css

    菜单代码
    页面body
    footer代码
    通用js代码
    页面js

    • mfk说道:

      格式乱了。html没了

    • mfk说道:

      ==template.html
      <html>
      <head>
      通用代码
      <slot name=”css”/>
      </head>
      <body>
      菜单代码
      <slot name=”body”/>
      footer代码
      通用js代码
      <slot name=”js”/>
      </body>
      </html>

      使用时
      ===1.html
      <html template=”template.html”>
      <insert slot=”css”>
      页面css
      </insert>
      <insert slot=”js”>
      页面js
      </insert>
      <insert slot=”body”>
      页面body
      </insert>

      最终渲染结果
      <html>
      <head>
      通用代码
      页面css
      </head>
      <body>
      菜单代码
      页面body
      footer代码
      通用js代码
      页面js
      </body>
      </html>

  2. XboxYan说道:

    感觉可以加上slot什么的

    button

  3. Leon说道:

    张老师,你的博客只能使用国内的IP访问吗?

  4. 某某某说道:

    什么时候中国人能够积极升级浏览器?

    (标绿的那一段正好是国产浏览器的版本范围)