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

【问题标题】：How can you include Javascript and css files only in the case that they are not already included?如何仅在尚未包含 Javascript 和 css 文件的情况下包含它们？
【发布时间】：2012-07-17 20:51:13
【问题描述】：

我有一个大型的旧版 Web 应用程序。我在其中添加了一些 JavaScript，这些 JavaScript 依赖于一些 js 文件和一个 css 文件。这些文件可能已经包含在我要添加新 JavaScript 的页面中，也可能尚未包含。

只有在没有添加这些 Javascript 和 css 文件的情况下，我可以将它们包含到页面中吗？

【问题讨论】：

标签： javascript css

【解决方案1】：

检查库是否存在，如果不存在则加载它并且必要：

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

...

【讨论】：

如果没有声明jQuery，那将是一个ReferenceError。请改用if (!window.jQuery) {。

【解决方案2】：

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

如何插入标签： Can I create script tag by jQuery?

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

你有几个选择：

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's indexOf extension 在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'。

【讨论】：