动态加载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);
  }
}());

​