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

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以找script标签，分别为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'。