Day 116/200 不用后端技术,如何在页面中引用公共的h
2021-04-02 本文已影响0人
赵国星
写在前面的话
写一个页面,最基础的是写一个页面;多余一个页面就会有公共的部分;
动态复杂的可以用Vue,React,但如果是静态的简单页面,有点杀猪用牛刀的感觉,
那么不用后端技术,如何在页面中,引入公共的页面?
1、方案一:Object
代码如下:
<object data="./components/header.html"></object>
一般引用外部资源
2、方案二:iframe
其他的还有iframe方案,之前用过,问题比较多,就不推荐了~
但也可以解决题目中的需求;
一般引用内部资源
3、他山之石:Web Components
原生的HTML的组件化
类似Vue,React等前端框架,原生的组件化技术是Web Components
过去页面中引用公共的header和footer的方法
1、借助后端引入;
2、JQuery loader
3、KOA 引入;
参考链接
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/object
https://developer.mozilla.org/zh-CN/docs/Web/Web_Components
https://qastack.cn/programming/16660559/difference-between-iframe-embed-and-object-elements