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

How to restrict calling js appending functionality twice

本文关键字：两次 功能 何限制 调用 js 追加      更新时间：2023-09-26

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

好吧，我认为您可以通过向元素提供 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();

希望这对你有所帮助:)

您可以使用文档片段，以便只需要调用 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();

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

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
}
相关文章：