原生js动态引入js和 css的导航

最新推荐文章于 2024-05-09 10:39:03 发布

草木皆灰

最新推荐文章于 2024-05-09 10:39:03 发布

阅读量514

点赞数

分类专栏：工作笔记笔记

本文链接：https://blog.csdn.net/qq_35747711/article/details/115731487

版权

笔记同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

工作笔记

3 篇文章 0 订阅

订阅专栏

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);
}```

草木皆灰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js动态引入js和 css的导航

1.问题前端项目为非vue原生js写的项目，需要引入一个公共头部，但是页面非常的多，需要逐个页面进行修改，并且不同环境研发/测试/生产所引用的域名（test1.com可能为别的如test2.com）也是不一样的，整合文档如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,i
复制链接

扫一扫

专栏目录