search

Home >Web Front-end >JS Tutorial >JavaScript method to dynamically load scripts and styles_javascript skills

JavaScript method to dynamically load scripts and styles_javascript skills

WBOY
WBOYOriginal
2016-05-16 16:04:321126browse

One dynamic script

As the demand for the website increases, the demand for scripts also gradually increases; we have to introduce too many JS scripts and reduce the performance of the entire site;
So the concept of dynamic scripts emerged, loading the corresponding scripts at the right time;

1. Dynamically introduce js files

  var flag = true;
  if(flag){  
    loadScript('browserdetect.js');          // 调用函数,引入路径;
  }
  function loadScript(url){
    var script = document.createElement('script');   // 创建script标签;
    script.type = 'text/javascript';          // 设置type属性;
    script.src = url;                 // 引入url;
    document.getElementsByTagName('head')[0].appendChild(script);  // 将script引入<head>中;
  }

2. Dynamically execute js code

  var script = document.createElement('script');
  script.type = 'text/javascript';
  var text = document.createTextNode("alert('Lee')");  // 设置script标签内容;IE会报错;
  script.appendChild(text);
  document.getElementsByTagName('head')[0].appendChild(script);

  // PS:IE浏览器认为script是特殊元素,不能再访问子节点;
  // 为了兼容,可以使用text属性来代替;
  function loadScriptString(code){
    var script = document.createElement("script");
    script.type = "text/javascript";
    try{
    // IE浏览器认为script是特殊元素,不能再访问子节点;报错;
      script.appendChild(document.createTextNode(code));　　// W3C方式;
    }catch(ex){
      script.text = code;　　　　　　　　　　　　　　　　　　　　// IE方式;
    }
    document.body.appendChild(script);
  }
  // 调用;
  loadScriptString("function sayHi(){alert('hi')}");

2 Dynamic Style

In order to dynamically load style sheets, such as switching website skins;
There are two ways to load styles, one is the 2cdf5bf648cf2f33323966d7f58a7f3f tag, the other is the c9ccee2e6ea535a969eb3f532ad9fe89 tag;

1. Dynamically introduce link files 

  var flag = true;
  if(flag){
    loadStyles('basic.css');　　　　　　　　　　　　　　　　　　// 调用函数,引入路径;
  }
  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. Dynamically execute style code 

  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){
    // 如果是非IE;
    if(sheet.insertRule){
      sheet.insertRule(selectorText+"{"+cssText+"}",position);
    // 如果是IE;
    }else if(sheet.addRule){
      sheet.addRule(selectorText,cssText,position);
    }
  }

// 动态执行style2
  function loadStyleString(css){
    var style = document.createElement("style");
    style.type = "text/css";
    try{
    // IE会报错;不允许向<style>元素添加子节点;
      style.appendChild(document.createTextNode(css));
    }catch(ex){
    // 此时,访问元素的StyleSheet属性,该属性有有一个cssText属性,可以接受CSS代码;
      style.styleSheet.cssText = css;
    }
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style);
  }
  // 调用;
  loadStyleString("body {background-color:red}");
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Use Sublime to build nodejs environment under Windows system_node.jsNext article：Use Sublime to build nodejs environment under Windows system_node.js

Related articles

See more