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

Question

我需要动态附加 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();

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

希望这对您有所帮助:)

Answer 2

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

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
}

Answer 3

您可以使用 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();

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

How to restrict calling js appending functionality twice

html

javascript

function

append

stylesheet