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');
}
}
}
4 respuestas
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.
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>
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');
}
}
}
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>
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.