如何限制调用js附加功能两次答案

【问题标题】：How to restrict calling js appending functionality twice如何限制调用js附加功能两次
【发布时间】：2016-05-13 15:30:36
【问题描述】：

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

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

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

这是我尝试过的：

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();

【问题讨论】：

stackoverflow.com/questions/34672090/…的可能重复
Any other generic way to restrict the above method to be called only once.为什么要限制呢？

标签： javascript html function append stylesheet

【解决方案1】：

好吧，我认为您可以通过向元素提供 id 并在添加它之前检查该元素是否存在来实现它。 示例：

 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();

希望对你有帮助:)

【讨论】：

【解决方案2】：

您可以使用 documentfragment 以便只需要调用一次 appendChild 来添加两个元素：

var jscss = function(cp, sp){

  var fragment = document.createDocumentFragment();

  var css = document.createElement("link");
  css.setAttribute("rel", "stylesheet");
  css.setAttribute("type", "text/css");
  css.setAttribute("href", cp);
  fragment.appendChild(css);
  //Does not affect the DOM

  var script = document.createElement('script');
  script.src = sp;
  fragment.appendChild(script);
  //Does not affect the DOM

  document.getElementsByTagName('head')[0].appendChild(fragment);
  //Adds both elements to the DOM
};

jscss();

【讨论】：

【解决方案3】：

使用变量来记住函数是否已经运行。

var jscss_run = false;
function jscss(cp, sp) {
    if (jscss_run) {
        return; // don't run a second time
    }
    jscss_run = true;
    // do all the real work
}

【讨论】：