JavaScript's method of dynamically loading scripts and styles

  • 2020-05-27 04:27:41
  • OfStack

1 dynamic script

When the demand of the website grows, the demand of the script also grows gradually; We had to introduce too many JS scripts that slowed down the performance of the entire site;
So there's this notion of dynamic scripting, loading the script at the right time;

1. Dynamic introduction of js files


  var flag = true;
  if(flag){  
    loadScript('browserdetect.js');          //  Call a function , The introduction of the path ;
  }
  function loadScript(url){
    var script = document.createElement('script');   //  create script The label ;
    script.type = 'text/javascript';          //  Set up the type attribute ;
    script.src = url;                 //  The introduction of url;
    document.getElementsByTagName('head')[0].appendChild(script);  //  will script The introduction of <head> In the ;
  }

2. Execute js code dynamically


  var script = document.createElement('script');
  script.type = 'text/javascript';
  var text = document.createTextNode("alert('Lee')");  //  Set up the script Label content ;IE complains ;
  script.appendChild(text);
  document.getElementsByTagName('head')[0].appendChild(script);

  // PS:IE The browser thinks script It's a special element , Child nodes can no longer be accessed ;
  //  In order to compatible , You can use text Properties instead of ;
  function loadScriptString(code){
    var script = document.createElement("script");
    script.type = "text/javascript";
    try{
    // IE The browser thinks script It's a special element , Child nodes can no longer be accessed ; An error ;
      script.appendChild(document.createTextNode(code));  // W3C way ;
    }catch(ex){
      script.text = code;                    // IE way ;
    }
    document.body.appendChild(script);
  }
  //  call ;
  loadScriptString("function sayHi(){alert('hi')}");

2 dynamic style

To load stylesheets dynamically, such as by changing the skin of a web site;
Styles can be loaded in one of two ways < link > Tag,1 is < style > The label;

1. Dynamic introduction of link files


  var flag = true;
  if(flag){
    loadStyles('basic.css');                  //  Call a function , The introduction of the path ;
  }
  function loadStyles(url){
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = url;
    document.getElementsByTagName('head')[0].appendChild(link);
  }

2. Execute style code dynamically


  var flag = true;
  if(flag){
    var style = docuemnt.createElement('style');
    style.type = 'text/css';
    document.getElementsByTagName('head')[0].appendChild(style);
    insertRule(document.styleSheets[0],'#box','background:red',0);
  }
  function insertRule(sheet,selectorText,cssText,position){
    //  If you are IE;
    if(sheet.insertRule){
      sheet.insertRule(selectorText+"{"+cssText+"}",position);
    //  If it is IE;
    }else if(sheet.addRule){
      sheet.addRule(selectorText,cssText,position);
    }
  }

//  Dynamic execution style2
  function loadStyleString(css){
    var style = document.createElement("style");
    style.type = "text/css";
    try{
    // IE complains ; Not allowed to <style> Element to add child nodes ;
      style.appendChild(document.createTextNode(css));
    }catch(ex){
    //  At this time , Access element StyleSheet attribute , This property has 1 a cssText attribute , Can accept CSS code ;
      style.styleSheet.cssText = css;
    }
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style);
  }
  //  call ;
  loadStyleString("body {background-color:red}");

Related articles: