如何實(shí)現(xiàn)JavaScript動(dòng)態(tài)加載CSS和JS文件

更新時(shí)間：2021年12月09日 12:10:35 投稿：lijiao

這篇文章主要為大家詳細(xì)介紹了JavaScript動(dòng)態(tài)加載CSS和JS文件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

項(xiàng)目中需要用到動(dòng)態(tài)加載CSS 文件，整理了一下，順便融合了動(dòng)態(tài)加載JS 的功能寫成了一個(gè)對(duì)象，先上代碼：

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

對(duì)象包含兩個(gè)完全獨(dú)立的方法，分別用來加載CSS 文件和JS 文件，參數(shù)均為欲加載的文件路徑。原理非常的簡(jiǎn)單：對(duì)于不同的加載文件類型創(chuàng)建不同的節(jié)點(diǎn)，然后添加各自的屬性，最后扔到head 標(biāo)簽里面。經(jīng)測(cè)試，本方法兼容各瀏覽器，安全、無毒、環(huán)保，是 web 開發(fā)人員工作常備代碼。

下面是調(diào)用代碼，異常簡(jiǎn)單：

//動(dòng)態(tài)加載 CSS 文件
dynamicLoading.css("test.css");

//動(dòng)態(tài)加載 JS 文件
dynamicLoading.js("test.js");

動(dòng)態(tài)加載js和css

開發(fā)過程中經(jīng)常需要?jiǎng)討B(tài)加載js和css，今天特意總結(jié)了一下常用的方法。

1、動(dòng)態(tài)加載js

方法一：動(dòng)態(tài)加載js文件

// 動(dòng)態(tài)加載js腳本文件
 function loadScript(url) {
 var script = document.createElement("script");
 script.type = "text/javascript";
 script.src = url;
 document.body.appendChild(script);
 }
 // 測(cè)試
 loadScript("javascript/lib/cookie.js");

方法二：動(dòng)態(tài)加載js腳本

// 動(dòng)態(tài)加載js腳本
 function loadScriptString(code) {
 var script = document.createElement("script");
 script.type = "text/javascript";
 try{
  // firefox、safari、chrome和Opera
  script.appendChild(document.createTextNode(code));
 }catch(ex) {
  // IE早期的瀏覽器 ,需要使用script的text屬性來指定javascript代碼。
  script.text = code;
 }
 document.body.appendChild(script);
 }
 // 測(cè)試
 var text = "function test(){alert('test');}";
 loadScriptString(text);
 test();

2、動(dòng)態(tài)加載css

方法一：動(dòng)態(tài)加載css文件

// 動(dòng)態(tài)加載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);
 }
 // 測(cè)試
 loadStyles("css/secondindex.css");

方法二：動(dòng)態(tài)加載css腳本

// 動(dòng)態(tài)加載css腳本
 function loadStyleString(cssText) {
 var style = document.createElement("style");
 style.type = "text/css";
 try{
  // firefox、safari、chrome和Opera
  style.appendChild(document.createTextNode(cssText));
 }catch(ex) {
  // IE早期的瀏覽器 ,需要使用style元素的stylesheet屬性的cssText屬性
  style.styleSheet.cssText = cssText;
 }
 document.getElementsByTagName("head")[0].appendChild(style);
 }
 // 測(cè)試
 var css = "body{color:blue;}";
 loadStyleString(css);

比較直接的代碼

var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.href = "/css/indexIE.css";
link.rel = 'stylesheet';
link.type = 'text/css';
head.appendChild(link);

以上就是告訴大家如何實(shí)現(xiàn)JavaScript動(dòng)態(tài)加載CSS和JS文件，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: