html引入别的html文件(类似于框架的组件使用,只适合静态的,不适合组件传值)

接手了一个官网项目的开发,要求使用html原生去写,就不免有些头疼,像数据的响应式,组件化开发等这些框架带来的好处都用不了了,但是我需要使用使用组件以便于在各个页面引入开发,例如公共的导航栏,页脚等,这里给个案例可以使用html实现这种类似于组件的功能,这里不能组件互相传值,只能引入公共的样式和公共的功能

创建一个js文件

// 这里写头部引入的js文件// 创建一个新的 script 元素
var script = document.createElement('script')
// 设置 script 元素的 src 属性为 ECharts 的 CDN 地址
script.src = 'https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js'
// 将 script 元素添加到页面的 head 或 body 中
document.head.appendChild(script)// 这里加个onload事件,因为需要等上述操作完毕再执行下面的,下面的页面就是我们的公共的组件了
script.onload = function () {let str = `<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>/** 这里写样式 **/<style>#chart {width: 600px;height: 400px;}</style>
</head><body><!-- 用于展示图表的容器 --><div id="chart"></div>
</body>
</html>
`// 这里写后续的js操作// 获取 id 为 chart 的 div 元素var chartDiv = document.getElementById('abc')console.log('chartDiv', chartDiv)// 将新创建的 HTML 内容作为 div 的 innerHTML 插入chartDiv.innerHTML = str// 模拟数据let datax = ['00:00', '00:01', '00:02', '00:03', '00:04', '00:05', '00:06', '00:07', '00:08', '00:09', '00:10', '00:11']let data = [112, 118, 123, 128, 134, 126, 119, 114, 182, 130, 132, 127]// 初始化 ECharts 实例var myChart = echarts.init(document.getElementById('chart'))console.log('myChart', myChart)// 指定图表的配置项和数据var option = {grid: {top: 40,bottom: 40,left: 60,right: 40,containLabel: true, // 如果需要包含轴标签，请设置为 true},tooltip: {trigger: 'axis',backgroundColor: "rgba(0,0,0,0.3)",textStyle: {color: "#FFFFFF", // 文字的颜色},borderColor: "transparent"<