집 > 기사 > 웹 프론트엔드 > 스크립트 및 styles_javascript 기술을 동적으로 로드하는 JavaScript 방법

스크립트 및 styles_javascript 기술을 동적으로 로드하는 JavaScript 방법

WBOY원래의: 2016-05-16 16:04:321100검색

하나의 동적 스크립트

웹사이트에 대한 수요가 증가함에 따라 스크립트에 대한 수요도 점차 증가하고 JS 스크립트를 너무 많이 도입하여 전체 사이트의 성능을 저하시켜야 합니다.
그래서 적시에 해당 스크립트를 로드하는 동적 스크립트의 개념이 등장했습니다.

1. js 파일을 동적으로 소개

  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. js 코드를 동적으로 실행

  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가지 다이나믹 스타일

웹사이트 스킨 전환 등 스타일 시트를 동적으로 로드하기 위해
스타일을 로드하는 방법에는 두 가지가 있습니다. 하나는 2cdf5bf648cf2f33323966d7f58a7f3f 태그이고, 다른 하나는

태그입니다.

1. 링크 파일을 동적으로 소개합니다

  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. 스타일 코드를 동적으로 실행합니다

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

성명：

이전 기사：Sublime을 사용하여 Windows system_node.js에서 nodejs 환경 구축다음 기사：Sublime을 사용하여 Windows system_node.js에서 nodejs 환경 구축

스크립트 및 styles_javascript 기술을 동적으로 로드하는 JavaScript 방법

관련 기사