1.问题
前端项目为非vue原生js写的项目,需要引入一个公共头部 ,但是页面非常的多,需要逐个页面进行修改,并且不同环境研发/测试/生产所引用的域名(test1.com可能为别的如test2.com)也是 不一样的,整合文档如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="https://test1.com/orderHeader.css" rel="stylesheet"/>
<title>demo</title>
</head>
<body>
<div id="commonHeader"></div>
<div>
正文
</div>
<script src="https://test.com/orderHeader.js"></script>
</body>
</html>
2.解决方案
考虑到所有页面都引入了全局变量 config.js来定义域名,所以考虑在config.js里添加 动态方法来集成导航 ,其中config对象会在k8s的config里被替换掉,打到目的,如果没有configmap,可以手动修改这一处即可。
let config = {
baseUrl:"/api",
homeUrl:"http://test1.com/", //API地址
}
loadScript(config.homeUrl + "header.js");
insertHeader();
loadStyles(config.homeUrl + "header.css");
//插入导航dev
function insertHeader() {
//新建一个div元素节点
var div=document.createElement("div");
// div.innerText = '<div id="commonHeader"></div>';
div.id = 'commonHeader';
//把div元素节点添加到body元素节点中成为其子节点,但是放在body的现有子节点的最后
//document.body.appendChild(div);
//插入到最前面
document.body.insertBefore(div, document.body.firstElementChild);
}
// 动态加载js脚本文件
function loadScript(url) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.body.appendChild(script);
}
// 动态加载css文件
function loadStyles(url) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}
var dynamicLoading = {
css: function(path){
if(!path || path.length === 0){
throw new Error('argument "path" is required !');
}
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.href = path;
link.rel = 'stylesheet';
link.type = 'text/css';
head.appendChild(link);
},
js: function(path){
if(!path || path.length === 0){
throw new Error('argument "path" is required !');
}
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = path;
script.type = 'text/javascript';
head.appendChild(script);
}
}```
```css
在这里插入代码片
3.补充
动态引入 js无法保证先后执行顺序 ,对加载方法进行优化 ,
url:引用 js路径
success:引入成功后执行的方法,可以递归引入其他方法
function loadScriptAsync(url, success) {
var domScript = document.createElement('script');
domScript.src = url;
success = success || function(){};
domScript.onload = domScript.onreadystatechange = function() {
if (!this.readyState || 'loaded' === this.readyState || 'complete' === this.readyState) {
success();
this.onload = this.onreadystatechange = null;
this.parentNode.removeChild(this);
}
}
document.getElementsByTagName('head')[0].appendChild(domScript);
}```