如何仅在尚未包含Javascript和css文件的情况下才包含它们

How can you include Javascript and css files only in the case that they are not already included?

本文关键字：文件 情况下 包含它 css 何仅 Javascript 包含      更新时间：2023-09-26

我有一个大型的遗留web应用程序。我在其中添加了一些JavaScript，它依赖于一些js文件和一个css文件。这些文件可能已经包含在我添加新JavaScript的页面上。

有没有一种方法可以将这些Javascript和css文件包含到一个页面中，只有在它们还没有添加的情况下？

检查库是否存在，如果不存在则加载和必需：

if (!window.jQuery) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "jquery-1.7.min.js";
    document.getElementsByTagName('HEAD')[0].appendChild(script);
}
...

您可以编写Javascript来分别搜索JS和CSS的脚本标记和链接标记。如果找不到，可以将标记插入HTML中。

如何插入标记：我可以通过jQuery创建脚本标记吗？

当然。查看document.createElement，然后相应地设置它们的属性。

您有几个选项：

JavaScript

检查特定方法是否未定义，然后将脚本附加到head。

if (typeof method === 'undefined') {
  var script = document.createElement('script'),
      head = document.getElementsByTagName('head')[0];
  script.type = 'text/javascript';
  script.src = 'path/to/js/file.js';
  head.appendChild(script);
}

或者，您可以循环遍历每个script元素，以检查src是否等于您需要添加的内容：

使用Mozilla的indexOf扩展名在sourceArr中搜索要包含的JS文件的src。

if (!Array.prototype.indexOf) {
  Array.prototype.indexOf = function (searchElement /*, fromIndex */ ) {
    "use strict";
    if (this == null) {
      throw new TypeError();
    }
    var t = Object(this);
    var len = t.length >>> 0;
    if (len === 0) {
      return -1;
    }
    var n = 0;
    if (arguments.length > 0) {
      n = Number(arguments[1]);
      if (n != n) { // shortcut for verifying if it's NaN
        n = 0;
      } else if (n != 0 && n != Infinity && n != -Infinity) {
        n = (n > 0 || -1) * Math.floor(Math.abs(n));
      }
    }
    if (n >= len) {
      return -1;
    }
    var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
    for (; k < len; k++) {
      if (k in t && t[k] === searchElement) {
        return k;
      }
    }
    return -1;
  }
}

要使用它，请执行以下操作：

var scripts = document.getElementsByTagName('script'),
    sourceArr = [],
    i = 0;
for (i = scripts.length; i--;) {
  var source = scripts[i].src;
  sourceArr.push(source);
}
if (sourceArr.indexOf('path/to/js/file.js') === -1) {
  var script = document.createElement('script'),
      head = document.getElementsByTagName('head')[0];
  script.type = 'text/javascript';
  script.src = 'path/to/js/file.js';
  head.appendChild(script);
}

您也可以使用上面的CSS文件。只需循环遍历每个link元素并设置cssFile.type = 'text/css'并添加cssFile.rel = 'stylesheet'。

相关文章：