从数组加载css和js文件然后调用数组中的函数

时间:2015-06-24 06:45:11

标签: javascript jquery html ajax

我正在使用像

这样的js json数组
var plugs={
                "material":[
                    "css":["plugins/Material/css/roboto.min.css",
                            "plugins/Material/css/material-fullpalette.css",
                            "plugins/Material/css/ripples.min.css"], 
                    "js":["plugins/Material/js/ripples.min.js","plugins/Material/js/material.min.js"],


                    "fire":"materialInit"
                ]
            }

我用它来加载外部插件文件。所以我需要的是首先加载数组中的js和css文件。然后在完成此操作后,应调用函数"fire":"materialInit"

  1. 从数组中加载css和js文件,然后
  2. 数组中的调用函数
  3. 提前致谢,

2 个答案:

答案 0 :(得分:0)

你无法在php中使用JSON,你需要执行json_decode($ jsonString),然后通过foreach循环访问它。

例如:

<?php
$json = '{"a":1,"b":2,"c":3,"d":4,"e":5}';
$php_equivalent = json_decode($json);
?>

你不能用php加载文件,你所能做的就是修改和/或创建元素

所以你可以像这样创建一个js函数 -

 function loadCSS(href)
 {
var head  = document.getElementsByTagName('head')[0];
var link  = document.createElement('link');
link.rel  = 'stylesheet';
link.type = 'text/css';
link.href = href
link.media = 'all';
head.appendChild(link);
}

并使用像这样的PHP调用该函数 -

<?php
echo "<script type='text/javscript'>";
echo "load($csshref)";
echo "</script>";
?>

你可以做同样的加载js文件

答案 1 :(得分:0)

我找到了解决方案......,希望这可以帮助其他人

var promises=[];
function loadCss(file){
$("<link/>", {
       rel: "stylesheet",
       type: "text/css",
       href: file
    }).appendTo("head");
}

$.each(plugs, function (index, value) {
    if(value['js'])
    var jsD=value['js'];
    if(value['css'])
    var csD=value['css'];
    var arrayName = index;
    promises[arrayName] = new Array();
    if(csD)
    if( typeof csD === 'string' ) {
        loadCss(csD);   
        }else{
        $.each(csD, function (index2, value2) { loadCss(value2); });
        }
    if(jsD)
    if( typeof jsD === 'string' ) {
        var file=jsD;
        var request=$.ajax({
              type: "GET",
              url: file,
              dataType: "script",
              async: false,
              cache: true,
              success:function(){console.log(file);},
              fail:function(){console.log("fail loading "+file);}
            });
        promises[index].push( request  );   
        }else{
        $.each(jsD, function (index3, value3) { 
             var file=value3;
             var request=$.ajax({
              type: "GET",
              url: file,
              dataType: "script",
              async: false,
              cache: true,
              success:function(){console.log(file);},
              fail:function(){console.log("fail loading "+file);}
            });

          });
        }

    promises[index].push( request  );
        $.when.apply(null, promises[index]).done(function(){
            //console.log(plugs[index]['fire']);
            if (typeof plugs[index]['fire'] !== 'undefined' && $.trim(plugs[index]['fire'])!='')
                window[plugs[index]['fire']](); 
            });

    });//plugs loading end