用js加载js/css，无路径限制

最新推荐文章于 2023-04-23 16:05:52 发布

熊叁(san)

最新推荐文章于 2023-04-23 16:05:52 发布

阅读量508

点赞数

分类专栏：前端笔记

本文链接：https://blog.csdn.net/littlebearGreat/article/details/76157040

版权

前端笔记专栏收录该内容

126 篇文章 2 订阅

订阅专栏

html中需要加载很多css/js，这时候很多人选择把这些脚本与样式表放在一个Js脚本（命名此脚本为a）中加载，这样会使得html看起来很简洁，此方法可以使用。

另一种情况：

如果a与其它js/css是一个整体（如：封装好的插件），而这个整体相对于html的路径不固定，这时候html只能加载到a，而其它js/css却路径错误，怎么办？

下面就解决这个问题

把下面代码写在a中，用此代码来加载js/css即可

/*加载js/css  */
;
!function() {
	"use strict";
	var TT = {
		getPath:function(){
			var e = document.scripts,
				t = e[e.length - 1],
				i = t.src;
			if (!t.getAttribute("merge")) return i.substring(0, i.lastIndexOf("/") + 1);
		}(),
		head:function(){
			var head = document.getElementsByTagName('head')[0];
			return head;
		}(),
		adLink:function(link){
			if (TT.getPath) {
				for (var i = 0; i < link.length; i++) {
					var l = document.createElement("link");
					l.rel = "stylesheet";
					l.href = TT.getPath + link[i];
					TT.head.appendChild(l);
				};
			};
		},
		adScript:function(src){
			if (TT.getPath) {
				for (var i = 0; i < src.length; i++) {
					src[i]
					var s = document.createElement("script");
					s.src = TT.getPath + src[i];
					TT.head.appendChild(s);
				};
			};
		}
	};

	// 把要加载的css相对于此js脚本的路径写在link数组中
	// 把要加载的js相对于此js脚本的路径写在src数组中
	var link = ['../../other/css/cs.css'];
	var src  = ['../../other/js1.js','../../other/js2.js'];

	TT.adLink(link);
	TT.adScript(src);
}(window);