Question

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

有没有办法可以将这些Javascript和css文件包含在页面中，只是在它们尚未添加的情况下？

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

...

Answer 2

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

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

Answer 3

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

Answer 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'。

如果只包含Javascript和css文件，它们如何才能包含它们？

4 个答案: