0

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

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

4

4 回答 4

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

...
于 2012-07-16T19:43:06.727 回答
0

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

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

于 2012-07-16T19:43:27.870 回答
0

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

于 2012-07-16T19:44:27.147 回答
0

你有几个选择：

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扩展程序来搜索您想要包含的 JS 文件sourceArr。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'.

于 2012-07-16T20:14:47.927 回答