Day 115/200 不用后端技术，如何在页面中引用公共的header和footer？

写在前面的话

写一个页面，最基础的是写一个页面；多余一个页面就会有公共的部分；

动态复杂的可以用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