Dynamically loading an external JavaScript or CSS file

最新推荐文章于 2024-02-16 15:39:22 发布

最新推荐文章于 2024-02-16 15:39:22 发布 · 120 阅读

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript和DOM操作实现动态加载外部JS和CSS文件的方法。通过创建并配置新的script或link元素，可以实现在页面运行时动态加载这些资源。

<head>

<linktype="text/css"rel="stylesheet"href="style/style.css"/>

<scripttype="text/javascript"src="js/jsFile.js"></script>

</head>

We commonly load external javascript (*.js) or css (*.css) file on the page with the aboveway,doesn't we? Actually, we can make use of javascript and DOM implementing dynamically loading those files.We can use operating DOM method to achieve it.For example, load an external javascript file and an external css file with the following function.

functionrequireFile(fileName,fileType)...{

varref;

if(fileType=="js")...{

ref=document.createElement("script");

ref.setAttribute("type","text/javascript");

ref.setAttribute("src",fileName);

}

if(fileType=="css")...{

ref=document.createElement("link");

ref.setAttribute("type","text/css");

ref.setAttribute("rel","stylesheet");

ref.setAttribute("href",fileName);

}

document.getElementsByTagName("head")[0].appendChild(ref);

}

Then. we can use requireFile("js/js.js", "js") to dynamically load js/js.js file or requireFile("style/style.css", "css") to dynamically load style.css file.

That's OK!