스크립트 및 styles_javascript 기술을 동적으로 로드하는 JavaScript 방법-JS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2016-05-16 16:04:32

원래의

1101명이 탐색했습니다.

하나의 동적 스크립트

웹사이트에 대한 수요가 증가함에 따라 스크립트에 대한 수요도 점차 증가하고 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가지 다이나믹 스타일

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

태그입니다.

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

로그인 후 복사