使用JavaScript加载页面样式和JavaScript
使用JavaScript的一种很好的技术是加载单个JavaScript文件并获取该文件以加载所需的任何其他JavaScript或CSS文档。这意味着您可以通过包含单个文件来简化页面上脚本的注入，然后再加载其他文件。这是完成此任务的方法。
基本思想是将所需的引用添加到文档的DOM结构中。假设我们要加载一个名为styles.css的CSS文件。要在运行时执行此操作，我们需要先创建一个元素并为其提供一些参数，然后再将其添加到
页面的元素。这是执行此操作所需的代码。
//创建链接元素并将其存储在变量中。
var linkElement = document.createElement("link");
//将链接元素的rel属性设置为样式表
linkElement.setAttribute("rel", "stylesheet");
//将链接元素的type属性设置为text/css
linkElement.setAttribute("type", "text/css");
//将link元素的href属性设置为指向文件
linkElement.setAttribute("href", "http://www.example.com/styles.css");
//将link元素添加到文档的开头。
document.getElementsByTagName("head")[0].appendChild(linkElement);要使用JavaScript执行相同的操作，我们只需要稍微更改一下元素和属性即可。这是如何加载名为script.js的脚本文件。
var scriptElement = document.createElement("script");
scriptElement.setAttribute("type","text/javascript");
scriptElement.setAttribute("src","http://www.example.com/script.js");
document.getElementsByTagName("head")[0].appendChild(scriptElement);您还可以通过创建一个函数来简化此过程，该函数采用文件名和我们尝试加载的文件类型。
function loadjscssfile(filename, filetype){
if (filetype=="js"){
//如果filename是一个外部JavaScript文件
var theElement = document.createElement("script");
theElement.setAttribute("type","text/javascript");
theElement.setAttribute("src", filename);
}else if(filetype=="css"){
//如果filename是一个外部CSS文件
var theElement= document.createElement("link");
theElement.setAttribute("rel", "stylesheet");
theElement.setAttribute("type", "text/css");
theElement.setAttribute("href", filename);
}
if (typeof element!="undefined"){
document.getElementsByTagName("head")[0].appendChild(theElement);
}
};要使用此功能，请执行以下操作。
loadjscssfile("http://www.example.com/script.js","js");
最后一点是文件名必须是对该文件的绝对引用。规则是，如果您无法将URL剪切并粘贴到浏览器中并获取文件，则此方法将行不通。