17

我想在加载特定div内容时向我的网站添加其他脚本和样式。我首先定义脚本或样式表的路径，然后创建一个元素。此后，我将元素附加到 HTML 中的 head 标签。

但我想在再次附加之前查看脚本或样式表是否已经附加。附加一个已经存在的脚本或样式表是愚蠢的。

问：如何使用javascript检查head标签中是否已经存在脚本，如果不存在则追加元素？

编辑

我根据@KernelPanik 的回答制作了一个函数。它还没有工作，但希望它会。该功能目前有问题：我的脚本附加功能不起作用

4

7 回答 7

15

如果你可以使用jquery，这段代码很好

function appendScript(filepath) {
    if ($('head script[src="' + filepath + '"]').length > 0)
        return;

    var ele = document.createElement('script');
    ele.setAttribute("type", "text/javascript");
    ele.setAttribute("src", filepath);
    $('head').append(ele);
}

function appendStyle(filepath) {
    if ($('head link[href="' + filepath + '"]').length > 0)
        return;

    var ele = document.createElement('link');
    ele.setAttribute("type", "text/css");
    ele.setAttribute("rel", "Stylesheet");
    ele.setAttribute("href", filepath);
    $('head').append(ele);
}

在你的代码中写

appendScript('/Scripts/myScript.js');
appendStyle('/Content/myStyle.css');
于 2014-01-14T08:17:50.430 回答
7 
var lib = '/public/js/lib.js';

if (!isLoadedScript(lib)) {
  loadScript(lib);
}

// Detect if library loaded
function isLoadedScript(lib) {
  return document.querySelectorAll('[src="' + lib + '"]').length > 0
}

// Load library
function loadScript(lib) {
  var script = document.createElement('script');
  script.setAttribute('src', lib);
  document.getElementsByTagName('head')[0].appendChild(script);
  return script;
}
于 2016-01-12T08:53:00.277 回答
4

您可以使用 DOMgetElementsByTagName("script") 来获取<script>文档中的所有标签。然后，您可以检查src返回的每个脚本标记的 url，以获取已添加到 head 部分的脚本的 url。同样，您可以通过将“script”的搜索替换为“style”来对样式表执行类似的操作。

例如，如果附加到该<head>部分的脚本的 url 是header_url.html

var x = document.getElementsByTagName("script");
var header_already_added = false;

for (var i=0; i< x.length; i++){
    if (x[i].src == "header_url.html"){
        // ... do not add header again
        header_already_added = true;
    }
}

if (header_already_added == false){
    // add header if not already added
}

同样，如果附加到该<head>部分的样式的 url 是header_style.css

var x = document.getElementsByTagName("style");
var header_already_added = false;

for (var i=0; i< x.length; i++){
    if (x[i].src == "header_style.css"){
        // ... do not add header again
        header_already_added = true;
    }
}

if (header_already_added == false){
    // add header if not already added
}

这里也问了一个类似的问题：Check if Javascript script exists on page

于 2013-04-13T12:32:17.003 回答
2

我使用了 Jack Lee 的解决方案。它很容易实现，并且几乎可以使用任何类型的文件快速通用......我没有扩展任何东西......我实际上可能有点傻眼......只是想列出我所做的事情以防它帮助某人别的...

var lib_jq = '//pathtofile/jquery.js';
var lib_bs = '//pathtofile/bootstrap.min.3.5.js';
var lib_cs = '//pathtofile.css';

 ///checks files with the SRC attribute
function isLoadedScript(lib) {
    return document.querySelectorAll('[src="' + lib + '"]').length > 0
}
///checks files with the HREF attribute
function isLoadedCss(lib) {
    return document.querySelectorAll('[href="' + lib + '"]').length > 0
}
///loads the script.js files
function loadScript(link) {
   document.write('<scr' + 'ipt type="text/javascript" src="'+link+'"></scr' + 'ipt>');
}

///loads the style.css files
function loadCss(link) {
   document.write('<link rel="stylesheet" href="'+link+'">');
}

 /// run funtion; if no file is listed, then it runs the function to grab the URL listed. ///Run a seperate one for each file you wish to check. 
if (!isLoadedScript(lib_jq)) { loadScript(lib_jq); }
if (!isLoadedScript(lib_bs)) { loadScript(lib_bs); }
if (!isLoadedCss(lib_cs))    { loadCss(lib_cs);    }

I know there is always a "better" and more "elegant" solution, but for us beginiers, we got to get it working before we can start to understand it...
于 2016-05-14T05:07:51.150 回答
1

另一种使用函数助手的方法，如下所示

function isScriptAlreadyPresent(url) {
  var scripts = Array.prototype.slice.call(document.scripts);
  return scripts.some(function(el) {
     return el.src && el.src != undefined && el.src == url;
  });
}

isScriptAlreadyPresent('http://your_script_url.tld/your_lib.js');

它使用Array.prototype.some函数。如果您使用的浏览器不支持 ES5（IE7 和 IE8...），您可能需要es5-shim

于 2014-10-17T02:12:57.143 回答
0

也许headjs可以帮助你。

或者您可以在脚本标签中添加 onload 属性。

我的英语有点差，所以也许我误解了你的问题。

if(ie){
  js.onreadystatechange = function(){
    if(js.readyState == 'complete'){
      callback(js);
  }
}
else{  
js.onload = function(){
  callback(js);
}
于 2013-04-13T12:27:46.257 回答
-3

您可以尝试从该js脚本文件中调用一些函数、对象、变量，如果找到则它存在，如果不存在，则需要插入该js脚本文件。

于 2014-07-31T14:07:44.830 回答