美文网首页
前端动态加载js和css

前端动态加载js和css

作者: cuttlefish | 来源:发表于2022-09-19 09:33 被阅读0次

    项目中需要用到动态加载CSS 文件,整理了一下,顺便融合了动态加载JS 的功能写成了一个对象,先上代码:

    var dynamicLoading = {
     css: function(path){
     if(!path || path.length === 0){
     throw new Error('argument "path" is required !');
     }
     var head = document.getElementsByTagName('head')[0];
     var link = document.createElement('link');
     link.href = path;
     link.rel = 'stylesheet';
     link.type = 'text/css';
     head.appendChild(link);
     },
     js: function(path){
     if(!path || path.length === 0){
     throw new Error('argument "path" is required !');
     }
     var head = document.getElementsByTagName('head')[0];
     var script = document.createElement('script');
     script.src = path;
     script.type = 'text/javascript';
     head.appendChild(script);
     }
    }
    
    

    对象包含两个完全独立的方法,分别用来加载CSS 文件和JS 文件,参数均为欲加载的文件路径。原理非常的简单:对于不同的加载文件类型创建不同的节点,然后添加各自的属性,最后扔到head 标签里面。经测试,本方法兼容各浏览器,安全、无毒、环保,是 web 开发人员工作常备代码。
    下面是调用代码,异常简单:

    //动态加载 CSS 文件
    dynamicLoading.css("test.css");
    
    //动态加载 JS 文件
    dynamicLoading.js("test.js");
    
    
    

    动态加载js

    方法一:加载脚本

    // 动态加载js脚本
     function loadScriptString(code) {
     var script = document.createElement("script");
     script.type = "text/javascript";
     try{
      // firefox、safari、chrome和Opera
      script.appendChild(document.createTextNode(code));
     }catch(ex) {
      // IE早期的浏览器 ,需要使用script的text属性来指定javascript代码。
      script.text = code;
     }
     document.body.appendChild(script);
     }
     // 测试
     var text = "function test(){alert('test');}";
     loadScriptString(text);
     test();
    

    方法二:加载文件

    // 动态加载js脚本文件
     function loadScript(url) {
     var script = document.createElement("script");
     script.type = "text/javascript";
     script.src = url;
     document.body.appendChild(script);
     }
     // 测试
     loadScript("javascript/lib/cookie.js");
    
    

    动态加载css

    方法一:加载脚本

    // 动态加载css脚本
     function loadStyleString(cssText) {
     var style = document.createElement("style");
     style.type = "text/css";
     try{
      // firefox、safari、chrome和Opera
      style.appendChild(document.createTextNode(cssText));
     }catch(ex) {
      // IE早期的浏览器 ,需要使用style元素的stylesheet属性的cssText属性
      style.styleSheet.cssText = cssText;
     }
     document.getElementsByTagName("head")[0].appendChild(style);
     }
     // 测试
     var css = "body{color:blue;}";
     loadStyleString(css);
    
    
    var head = document.getElementsByTagName('head')[0];
    var link = document.createElement('link');
    link.href = "/css/indexIE.css";
    link.rel = 'stylesheet';
    link.type = 'text/css';
    head.appendChild(link); 
    

    方法二:加载文件

    // 动态加载css文件
     function loadStyles(url) {
     var link = document.createElement("link");
     link.type = "text/css";
     link.rel = "stylesheet";
     link.href = url;
     document.getElementsByTagName("head")[0].appendChild(link);
     }
     // 测试
     loadStyles("css/secondindex.css");
    

    相关文章

      网友评论

          本文标题:前端动态加载js和css

          本文链接:https://www.haomeiwen.com/subject/bcxportx.html