js "include"其他js / css 文件

最新推荐文章于 2025-09-13 11:09:59 发布

原创最新推荐文章于 2025-09-13 11:09:59 发布 · 1w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #include #import #stylesheet #path #html

web前端专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态加载CSS和JS文件的方法，并通过一个具体示例展示了如何实现这一功能。需要注意的是，在同时加载CSS和JS文件时，为了用户体验，通常会优先加载CSS文件以快速展示页面样式。

t.html

<html>
<body>
<label id="sp">aaa</label>
</body>
<script type="text/javascript" src="a.js"></script>
</html>

a.js

function $import(path, type){
var i, 
base, 
src = "a.js", //html中已经加载的js文件，为的是取得base路径
scripts = document.getElementsByTagName("script");
for (i = 0; i < scripts.length; i++) { //遍历html中已经加载的js，取得整个应用加载js的base路径
if (scripts[i].src.match(src)) {
base = scripts[i].src.replace(src, "");
break;
}
}

if (type == "css") {
document.write("<" + "link href=\"" + base + path + "\" rel=\"stylesheet\" type=\"text/css\"></" + "link>");
} else {
document.write("<" + "script src=\"" + base + path + "\"></" + "script>");
}
}
$import('b.css', 'css');
$import('b.js', 'js');

/*注意2个问题：

*1：同时import css和js文件时，应该把css放在前面，好让界面效果先展现出来

2：a.js放在t.html的body前，还是body后是有讲究的 */

b.js

alert("ok");

b.css

#sp {color:blue;}