javascript - 如何限制两次调用js append 功能

Question

我需要动态 append css 和 js 文件，并使用下面的方法

document.getElementsByTagName('head')[0].appendChild(); 

此方法不允许第二个参数。 我必须动态 append css 和 js 文件。我调用上述方法两次来 append 文件。限制上述方法仅被调用一次的任何其他通用方法。

这是我尝试过的:

var jscss = function(cp, sp){

    var css = document.createElement("link");
    css.setAttribute("rel", "stylesheet");
    css.setAttribute("type", "text/css");
    css.setAttribute("href", cp);
    document.getElementsByTagName('head')[0].appendChild(css);

    var script = document.createElement('script');
    script.src = sp;
    document.getElementsByTagName('head')[0].appendChild(script);

};

jscss();

Answer 1

嗯，我认为你可以通过向元素提供 id 来实现它，并在 append 它之前检查该元素是否存在。 示例:

 var jscss = function(cp, sp){

    if(!document.getElementById("customStyleSheet")){
        var css = document.createElement("link");
        css.setAttribute("rel", "stylesheet");
        css.setAttribute("id", "customStyleSheet");
        css.setAttribute("type", "text/css");
        css.setAttribute("href", cp);
        document.getElementsByTagName('head')[0].appendChild(css);
    }

    if(!document.getElementById("customScript")){
        var script = document.createElement('script');
        script.src = sp;
        script.id = "customScript";
        document.getElementsByTagName('head')[0].appendChild(script);
    }

    };

    jscss();

希望这对你有帮助:)