動態加載js和css

1

動態加載CSS和JS文件

項目中需要用到動態加載CSS 文件，整理了一下，順便融合了動態加載JS 的功能寫成了一個對象，先上代碼：

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

對象包含兩個完全獨立的方法，分別用來加載CSS 文件和JS 文件，參數均為欲加載的文件路徑。原理非常的簡單：對於不同的加載文件類型創建不同的節點，然后添加各自的屬性，最后扔到head 標簽里面。經測試，本方法兼容各瀏覽器，安全、無毒、環保，是 web 開發人員工作常備代碼。
下面是調用代碼，異常簡單：
//動態加載 CSS 文件
dynamicLoading.css("test.css");

//動態加載 JS 文件
dynamicLoading.js("test.js");
以上就是告訴大家如何實現JavaScript動態加載CSS和JS文件，希望對大家的學習有所幫助。

2

  <script language="javascript"> function loadjscssfile(filename, filetype) { if (filetype == "js") { var fileref = document.createElement('script'); fileref.setAttribute("type", "text/javascript"); fileref.setAttribute("src", filename) } else if (filetype == "css") { var fileref = document.createElement("link"); fileref.setAttribute("rel", "stylesheet"); fileref.setAttribute("type", "text/css"); fileref.setAttribute("href", filename) } if (typeof fileref != "undefined") document.getElementsByTagName("head")[0].appendChild(fileref) } loadjscssfile("http://news.163.com/special/0001jt/dblue.css", "css"); </script>

3

1、直接document.write

  <script language="javascript"> document.write("<script src='test.js'><\/script>"); </script>

2、動態改變已有script的src屬性

  <script src='' id="s1"></script>

  <script language="javascript"> s1.src="test.js" </script>

3、動態創建script元素

  <script> var oHead = document.getElementsByTagName('HEAD').item(0); var oScript= document.createElement("script"); oScript.type = "text/javascript"; oScript.src="test.js"; oHead.appendChild( oScript); </script>

獲取當前網頁的源碼

  document.documentElement.outerHTML


  $.get(window.location.href,function(res){
  console.log(res);
  });

1.動態加載js

  function loadScript( url ){ 
  var script = document.createElement( "script" ); 
  script.type = "type/javascipt"; 
  script.src = url; 
  document.getElementsByTagName( "head" )[0].appendChild( script ); 
  };

2.動態加載CSS文件

  function loadCss( url ){ 
  var link = document.createElement( "link" ); 
  link.type = "text/css"; 
  link.rel = "stylesheet"; 
  link.href = url; 
  document.getElementsByTagName( "head" )[0].appendChild( link ); 
  };

3.動態加載CSS樣式

  if( flag ){ 
  var style = document.createElement( "style" ); 
  style.type = "text/css"; 
  document.getElementsByTagName( "head" )[0].appendChild( style ); 
  var sheet = document.styleSheets[0]; 
  insertRules( sheet,"#gaga1","background:#f00",0 ); 
  };

2020-02-09

async function loadScript(url) {
  let response = await fetch(url);
  let script = await response.text();
  eval(script);
}

let scriptUrl = 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js'
loadScript(scriptUrl);

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'script.js';
document.head.appendChild(script);

$.getScript('script.js');

(function () {
  if (typeof window.R === 'undefined') {
    var s = document.createElement('script');
    s.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/ramda/0.17.1/ramda.min.js');
    document.body.appendChild(s);
  }
}());

​