JavaScript dynamically loading scripts and styles _javascript tips

A dynamic script

When the demand of the website becomes bigger, the demand of the script becomes larger, and we have to introduce too many JS scripts to reduce the performance of the whole station.
So there is the concept of dynamic script, in the timely loading of the corresponding script;

1. Dynamic introduction of JS files

  var flag = true;
  if (flag) {  
    loadscript (' browserdetect.js ');          Call function, introduce path;
  }
  function Loadscript (URL) {
    var script = document.createelement (' script ');   Create a script label;
    Script.type = ' text/javascript ';          Sets the Type property;
    script.src = URL;                 Introducing a URL;
    document.getElementsByTagName (' head ') [0].appendchild (script);  Introduction of script into  
 

2. Execute JS Code dynamically

  var script = document.createelement (' script ');
  Script.type = ' text/javascript ';
  var text = document.createTextNode ("alert (' Lee ')");  Set script label content; IE will complain;
  Script.appendchild (text);
  document.getElementsByTagName (' head ') [0].appendchild (script);

  Ps:ie browser that script is a special element, can no longer access child nodes;
  For compatibility, you can use the Text property instead;
  function loadscriptstring (code) {
    var script = document.createelement ("script");
    Script.type = "Text/javascript";
    try{
    //IE browser that script is a special element, no longer access child nodes;
      Script.appendchild (document.createTextNode (code)); The mode of the consortium;
    catch (ex) {
      script.text = code; ie mode;
    }
    Document.body.appendChild (script);
  Call;
  Loadscriptstring ("function Sayhi () {alert (' Hi ')}");

Two dynamic styles

To dynamically load style sheets, such as switching the skin of a Web site;
There are two ways to load a style, one is the <link> tag, the other is the <style> tag;

1. Dynamic introduction of link file

  var flag = true;
  if (flag) {
    loadstyles (' basic.css '); Call function, introduce 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 non-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 ("sty
    Le ");
    Style.type = "Text/css";
      try{//IE will be an error, not allowed to add child nodes to <style> elements;
    Style.appendchild (document.createTextNode (CSS));
      }catch (ex) {//At this point, access the element's Stylesheet property, which has a csstext property that can accept CSS code;
    Style.styleSheet.cssText = CSS;
    The var head = document.getElementsByTagName ("head") [0];
  Head.appendchild (style);
  }//Call; 
Loadstylestring ("Body {background-color:red}");