Cómo verificar si un recurso css/js está incluido en head

<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
  <script src="myscript.js"></script>
</head>

Me gustaría tener una función que verifique si un recurso está incluido en el encabezado

checkIfHeaderHas('myscript.js'); // would return true
checkIfHeaderHas('mystyle.css'); // would return true
checkIfHeaderHas('mybla.css'); // would return false

Pero me pregunto cómo puedo buscar en la cabeza un nombre de archivo. (en el 'src' si es javascript, o en el 'href' si es un css)

preguntado el 02 de mayo de 12 a las 19:05

Entonces, ¿solo quiere saber si han sido incluido en la página o también si están completamente cargados? Porque esos son dos problemas muy diferentes. -

Para js, puede simplemente definir una variable (o constante) dentro del archivo .js y verificar si está definida en la página. -

@ Xeon06, incluido en la página -

4 Respuestas

Hice una pequeña función que hace lo que quieres. Recorre todo <link> y <script> elementos hasta que encuentre un script con ese nombre. Si no es así, devuelve falso.

function checkIfIncluded(file) {
    var links = document.getElementsByTagName("link");
    for(var i = 0; i < links.length; i++) {
        if (links[i].href.substr(-file.length) == file)
            return true;
    }

    var scripts = document.getElementsByTagName("script");
    for(var i = 0; i < scripts.length; i++) {
        if (scripts[i].src.substr(-file.length) == file)
            return true;
    }

    return false;
}

console.log(checkIfIncluded("mystyle.css"));
console.log(checkIfIncluded("myscript.js"));
console.log(checkIfIncluded("mybla.css"));
​

Ejemplo vivo

Tenga en cuenta que esto no solo encontrará recursos en el <head>, pero en todo el documento. Si realmente necesitas mirar dentro de la cabeza, dímelo y pensaremos en otra cosa.

contestado el 02 de mayo de 12 a las 19:05

esto también funciona muy bien, pero el recorrido no fue tan elegante como la solución que elegí: Interfaz de usuario de Shai

Es bueno que tenga la ventaja de no depender de jQuery: lilHar

esta debería haber sido la respuesta seleccionada ya que la respuesta seleccionada real es para css solamente y el enfoque seleccionado no funcionará para js si es necesario js El archivo es en sí mismo un jquery archivo que debe verificarse, +1 para esta respuesta. - Muhammad Ömer Aslam

Casi bien, pero hay problemas con los recursos como file.js?v=7. Todavía +1 por no usar jQuery. - ViliusL

Si está usando jQuery, tal vez podría hacer algo como:

var checkIfHeaderHas = function(fileName) {

    // Start with CSS.
    $.each($("header link"), function() {
        if ($(this).attr("href").toLowerCase() === fileName.toLowerCase())
            return true;
    });

    // Then JavaScript.
    $.each($("header script"), function() {
        if ($(this).attr("src").toLowerCase() === fileName.toLowerCase())
            return true;
    });

    // Default response.
    return false;
}

Disculpas por cualquier cosa que no esté del todo bien. Estoy eliminando esto de mi teléfono y no tuve tiempo de probarlo.

contestado el 02 de mayo de 12 a las 19:05

¿Qué pasa si necesito comprobar el jquery archivo en sí mismo y si aún no está cargado, ¿no fallará en ese momento? como $ no será reconocido - Muhammad Ömer Aslam

Tenga en cuenta que a pesar de los (7) votos a favor, esto no funciona, siempre devuelve falso. Aquí hay un solución de trabajo - SC1000

Usar .length en jquery funcionaría para esto. (¡No probado!)

Simplemente verifique si existe un elemento con el atributo href establecido en la URL de su archivo CSS:

if (!$("link[href='/path/to.css']").length){
alert('not loaded');
}else{
alert('loaded!');
}

contestado el 02 de mayo de 12 a las 19:05

Aquí hay una solución funcional (probada):

function checkIfHeaderHas(name) {
  const checks = [
    {attr: 'href', items: $("head link")},
    {attr: 'src', items: $("head script")}
    // add any other if needed...
  ];
  let res = false;
  if (typeof name === 'string') {
    const lc = name.toLowerCase();
    for (let i = checks.length - 1; i >= 0; i--) {
      $.each(checks[i].items, function () {
        if (($(this).attr(checks[i].attr) || '').toLowerCase() === lc) {
          res = true;
          return false; // exit the loop as soon as found
        }
      })
    }
  }
  return res;
}

Respondido 13 Jul 20, 18:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.