Tengo este método externo que cargará el archivo CSS correcto dependiendo del tamaño de pantalla que funcione. Cuando agregué más carpetas / páginas me di cuenta de que necesito especificar cuántas carpetas de profundidad cuando lo llamo para que pueda encontrar los archivos CSS. Funciona en las páginas que tienen una carpeta de profundidad que solo tiene 1 línea de texto para asegurarse de que esté cargada. Cuando intento cargar la página de índice que tiene imágenes y otras cosas, carga todo excepto el archivo CSS que dice "ReferenceError: Start no está definido". ¿Por qué no está definido? Mantenga todas las soluciones estrictamente a javascript, no quiero usar jQuery para este proyecto.

Aquí está el HTML que está en la etiqueta de la cabeza

<script src="../Scripts/Load_CSS_Template.js"></script>
<script>Start(0);</script>

Aquí está el javascript externo

function Start(Folders_Deep)
{ 

    if (Folders_Deep == "undefined")
    {
        console.log("I was not defined");
    }
    else
    {
        var Prefix = "";

        if(Folders_Deep == 1)
        {
            Prefix = "../";
        } 

        console.log("Browser Screen Width: " + window.innerWidth);
        console.log("Hostname: " + window.location.hostname);
        console.log("Folders_Deep: " + Folders_Deep);
        console.log("Prefix: " + Prefix);

        if (window.innerWidth <= '1400')
        {
            Get_CSS_File(Prefix + 'Mobile_Template.css'); 
        }
        else 
        { 
            Get_CSS_File(Prefix + 'Desktop_Template.css'); 
        }
    }
}
0
Peavey2787 10 dic. 2015 a las 01:18

4 respuestas

La mejor respuesta

Fue el ../ en la llamada para cargar el archivo js. Olvidé que copié y pegué desde la página que está dentro de una carpeta. Una vez que lo eliminé, cargó el script.

0
Peavey2787 9 dic. 2015 a las 23:30

Okay. Intenta esto en su lugar.

Agregue esto a la sección <head> en su archivo html:

<script type="text/javascript">

function getScript(src, callback) {
  var s = document.createElement('script');
  s.src = src;
  s.async = true;
  s.onreadystatechange = s.onload = function() {
    if (!callback.done && (!s.readyState || /loaded|complete/.test(s.readyState))) {
      callback.done = true;
      callback();
    }
  };
  document.querySelector('head').appendChild(s);
}

function myCallback() { Start(0); }

getScript("../Scripts/Load_CSS_Template.js", myCallback);

</script>
1
Morten E. Rasmussen 9 dic. 2015 a las 23:34

Si sus archivos CSS siempre están en el directorio raíz y JavaScript siempre está en el directorio /Scripts, no necesita ningún prefijo, solo use las rutas completas /Scripts/Load_CSS_Template.js, /Mobile_Template.css y { {X3}}. De lo contrario, use window.location para averiguar dónde se encuentra y actuar en consecuencia.

function Start(Folders_Deep) {
    var Prefix = "";

    if (undefined === Folders_Deep) {
        console.log("I was not defined");
    } else {
        if (Folders_Deep == 1) {
            Prefix = "../";
        } else if (Folders_Deep == 0) {
            Prefix = "./";
        }

        console.log("Browser Screen Width: " + window.innerWidth);
        console.log("Hostname: " + window.location.href);
        console.log("Folders_Deep: " + Folders_Deep);
        console.log("Prefix: " + Prefix);

        if (window.innerWidth <= '1400') {
            Get_CSS_File(Prefix + 'Mobile_Template.css');
        } else {
            Get_CSS_File(Prefix + 'Desktop_Template.css');
        }
    }
}
1
deamentiaemundi 9 dic. 2015 a las 23:32

Si solo desea que la función se ejecute cuando se carga el archivo (sin tener en cuenta la carga de otros archivos y objetos), simplemente puede colocar la llamada de Inicio (0) debajo de la función en Load_CSS_Template.js

Es decir.

function Start(Folders_Deep)
{ 

    if (Folders_Deep == "undefined")
    {
        console.log("I was not defined");
    }
    else
    {
        var Prefix = "";

        if(Folders_Deep == 1)
        {
            Prefix = "../";
        } 

        console.log("Browser Screen Width: " + window.innerWidth);
        console.log("Hostname: " + window.location.hostname);
        console.log("Folders_Deep: " + Folders_Deep);
        console.log("Prefix: " + Prefix);

        if (window.innerWidth <= '1400')
        {
            Get_CSS_File(Prefix + 'Mobile_Template.css'); 
        }
        else 
        { 
            Get_CSS_File(Prefix + 'Desktop_Template.css'); 
        }
    }
}

Start(0);

-------------------- [ SOLUCIÓN ALTERNATIVA ] -----------------------

En su lugar, coloque Start(0) en <body onLoad=""> y se ejecutará una vez que todo esté cargado. (Deje que el script se cargue como está en la sección html <head>).

Es decir.

<body onLoad="Start(0)">Hello World</body>
0
Mr Lister 14 dic. 2015 a las 15:17