2019-05-30

Javascript之动态加载脚本和样式

//动态加载脚本

function loadScript(url){

    let script = document.createElement("script");

    script.type = "text/javascript";

    script.src = url;                          

    document.body.appendChild(script);            

    }

   loadScript();         


    确定脚本加载完成

    function loadScriptString(code){

    let script = document.createElement("script");

    script.type = "text/javascript";

    try{

    script.appendChild(document.createTextNode(code));

    }catch(ex){

    script.text = code;                                    //兼容IE

    }

    document.body.appendChild(script);

    }

    loadScriptString("function sayHi(){alert('Hi!');}");             


///////////////////////////////////////////////////////////////////////////////////////////////////////////////

//动态加载样式

function loadStyle(url){

    let link = document.createElement("style");

    link.rel = "stylesheet";

    link.href = url;

    link.type = "text/css";

    let head = document.querySelectorAll("head")[0];

    head.appendChild(link);

      }

      //loadStyle();            


      //检测样式表加载完成

      function loadStyleString(code){

      let style = document.createElement("style");

      style.type = "text/css";

      try{

      style.appendChild(document.createTextNode(code));

      }catch(ex){

      style.stylesheet.cssText = code;                              //兼容IE

      }

      }

      loadStyleString("body{background-color:orange;}");

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。