Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Problema con ruta de archivo externo con javascript

Estas en el tema de Problema con ruta de archivo externo con javascript en el foro de Javascript en Foros del Web. Buen día. Mi problema realmente no es de javascript, creo, ni CSS, ni HTML, etc. Creo que es más bien de... ¡cómo declarar una ruta ...
  #1 (permalink)  
Antiguo 20/02/2014, 18:42
Avatar de berkeleyPunk  
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 565
Antigüedad: 11 años, 2 meses
Puntos: 22
Pregunta Problema con ruta de archivo externo con javascript

Buen día.

Mi problema realmente no es de javascript, creo, ni CSS, ni HTML, etc. Creo que es más bien de... ¡cómo declarar una ruta a un archivo!

Tengo un javascript que verifica si el explorador es Internet Explorer o no. Si lo es, entonces se carga el archivo CSS-ie.css. Si no lo es, se carga el archivo CSS.css. (Ambos están en la carpeta scripts)

Mi árbol de directorios es este:
Código Árbol:
Ver original
  1. www
  2.   --> images
  3.           --> imgs
  4.               paginas
  5.               scripts
  6.               varios


En cada documento html declaro la sig línea:
Código HTML:
Ver original
  1. <link type="text/css" href="" rel="stylesheet" id="hojaCSS" />

Y el JS:
Código Javascript:
Ver original
  1. function verificarBrowser()
  2.     {
  3.             var styleSheet      = document.getElementById("hojaCSS");
  4.             var infDelNavegador = window.navigator.userAgent;
  5.             var MSIE            = infDelNavegador.indexOf("MSIE");
  6.             var trident         = infDelNavegador.indexOf("Trident");
  7.            
  8.             if( (MSIE != -1) && (trident != -1) )
  9.             {
  10.                 styleSheet.href = "images/scripts/CSS-ie.css";
  11.             }
  12.             else
  13.             {
  14.                 styleSheet.href = "images/scripts/CSS.css";          
  15.             }
  16.     }


Miren, si el archivo html que debe jalar el CSS está en la carpeta www el javascript funciona perfecto y encuentra el archivo css en la ruta images/scripts/CSS.css ó CSS-ie.css.

Pero si el archivo está dentro de la carpeta "paginas", no se carga el css de la ruta: "../scripts/CSS.css".

Lo raro es que la ruta está bien, lo sé, porque si la pongo tal cual dentro de la etiqueta <link type=... /> , el navegador sí jala el CSS.

¿Entonces?


Última edición por berkeleyPunk; 20/02/2014 a las 19:10
  #2 (permalink)  
Antiguo 20/02/2014, 19:48
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Problema con ruta de archivo externo con javascript

Lo que sucede es que si el archivo HTML está dentro de la carpeta paginas, ya no estará al mismo nivel que si lo colocaras fuera de ella, por ejemplo, en www. Cuando existe diferencia de niveles, debes anteponer esto a la ruta: ../

Supongo que el script JS está dentro del archivo HTML, por lo tanto, lo correcto sería hacerlo así:

Código Javascript:
Ver original
  1. if ( (MSIE != -1) && (trident != -1) )
  2.     styleSheet.href = "../images/scripts/CSS-ie.css";
  3. else
  4.     styleSheet.href = "../images/scripts/CSS.css";

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 22/02/2014, 14:41
Avatar de berkeleyPunk  
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 565
Antigüedad: 11 años, 2 meses
Puntos: 22
Respuesta: Problema con ruta de archivo externo con javascript

Gracias maestro Alexis88.


Hoy es sábado y no estoy en casa con mi lap. Así que no tengo forma de probar la ruta que propones.

Varias cosas:

1. El JS está en un archivo externo, igual que el CSS.
2. Si el CSS se jala así: <link type="text/css" href="../scripts/CSS.css" rel="stylesheet" />, y con esta ruta (a diferencia de la que propones), el documento HTML ubicado en la carpeta paginas jala bien el archivo externo CSS.
3. Recuerdo haber hecho pruebas antes de abrir este post, incluyendo la que propones, y ninguna funcionó. Pero una vez que regrese a casa lo hago y posteo cómo me fue. Yo predigo que no va a ser distinto el resultado, pero voy a ver.

Supones que el javascript está declarado en el documento HTML. Como digo, no es así. ¿En este caso, hay alguna diferencia que el JS esté en un archivo externo o que se declare directamente en el documento HTML?

Evidentemente hay una diferencia, pues el javascript está en la carpeta scripts y el documento HTML está en paginas. Pero...


Saludos cordiales.

Última edición por berkeleyPunk; 22/02/2014 a las 14:50
  #4 (permalink)  
Antiguo 22/02/2014, 14:54
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 8 meses
Puntos: 578
Respuesta: Problema con ruta de archivo externo con javascript

A todo esto, hay una forma mil veces mejor de comprobar si el navegador del usuario es IE o no. Se hace directamente con html, sin necesidad de JavaScript:

Comentarios Condicionales.

Saludos
  #5 (permalink)  
Antiguo 23/02/2014, 03:14
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Problema con ruta de archivo externo con javascript

Solamente necesitas escribir las rutas correctas y los archivos serán jalados correctamente. Lo que yo te puse es en base al árbol que muestras, asumo que img, paginas, scripts y varios están al mismo nivel, dentro de images. Si no fuera así, la diferencia de niveles variará, ten cuidado con eso.

Con un ejemplo se entenderá mejor:
Código Árbol:
Ver original
  1. raíz
  2. |_______img
  3. |       |______ imagen1.jpg
  4. |       |______ imagen2.jpg
  5. |_______css
  6. |       |______ estilos1.css
  7. |       |______ estilos2.css
  8. |_______js
  9. |       |______ scripts.js
  10. |_______web
  11.         |______ index.html

En este ejemplo, tengo una carpeta raíz, que representa a la carpeta principal de una página X, dentro de ella, tengo cuatro carpeta: img, css, js y web, habiendo distintos archivos en cada una de ellas. En la carpeta web, tengo un archivo HTML de nombre index.html el cual viene siendo el único archivo HTML que se mostrará en la página. Para poder jalar las imágenes, hoja de estilos y el archivo JS hacia el archivo HTML, tengo que subir un nivel para estar al mismo nivel que las carpetas que contienen a dichos archivo y luego ingresar a cada una de ellas para acceder a los archivos en cuestión.

Código HTML:
Ver original
  1. <link rel = "stylesheet" type = "text/css" href = "../css/estilos1.css" />
  2. <script type = "text/javascript" src = "../js/scripts.js"></script>
  3. <img src = "../img/imagen1.jpg" />

Del modo en el que incluí a dichos archivos, es correcto para hacerlo desde el nivel en el que se encuentra el archivo HTML, sin embargo, si estuviera fuera de la carpeta web y se encontrara en raíz junto a las otras 3 carpetas, ya no sería necesario subir un nivel y se podría acceder a los archivos en cuestión de esta forma:

Código HTML:
Ver original
  1. <link rel = "stylesheet" type = "text/css" href = "css/estilos1.css" />
  2. <script type = "text/javascript" src = "js/scripts.js"></script>
  3. <img src = "img/imagen1.jpg" />

Como podrás notar, ya no está presente el ../, con el cual subía un nivel. Si tuviera que subir más niveles, solamente debo colocar más ../, los que sean necesarios para cubrir la diferencia de niveles entre el archivo que desea incluir a determinados archivos y éstos.

PHPeros, estás en lo cierto, no puedo estar más de acuerdo contigo, pero el muchacho quiere aprender a hacerlo con JS, por eso estamos en este foro; de cualquier manera, ahora conoce una mejor forma de hacerlo.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #6 (permalink)  
Antiguo 23/02/2014, 13:08
Avatar de berkeleyPunk  
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 565
Antigüedad: 11 años, 2 meses
Puntos: 22
De acuerdo Respuesta: Problema con ruta de archivo externo con javascript

Ok, muy bien, encontré el problema. Y resultó que mi primer juicio estaba erróneo. Era el javascript el problema y no la ruta.

Maestro Alexis88, tienes toda la razón en lo que has dicho. Pero, repito, lo raro es que el ../, como dije inicialmente, no me funcionaba si lo empleaba en el JS, aunque sí directamente en la ruta dentro del <link type...>.

Sabed todos que hallé el problema, y doy a conocer que la ruta que indiqué inicialmente era la correcta. Vean el javascript original (que es ligeramente distinto del que postee aquí):

Código Javascript:
Ver original
  1. function verificarBrowser()
  2.     {
  3.         $(document).ready(function()
  4.         {
  5.             var styleSheet      = document.getElementById("hojaCSS");
  6.             var infDelNavegador = window.navigator.userAgent;
  7.             var MSIE            = infDelNavegador.indexOf("MSIE");
  8.             var trident         = infDelNavegador.indexOf("Trident");
  9.            
  10.             if( (MSIE != -1) && (trident != -1) )
  11.             {
  12.                 styleSheet.href = "../scripts/css-ie.css";
  13.             }
  14.             else
  15.  
  16.             {
  17.                 styleSheet.href = "../scripts/css.css";          
  18.             }
  19.         });
  20.     }

Como se ve, iniciada la función está presente la línea con la que se inicia jQuery. Entiendo que dicha línea hace las veces del window.onload de javascript, con la diferencia de que no tiene que esperar hasta que se carguen todos los objetos en la página, sino sólo hasta que el DOM esté listo.

Bueno, mucho más atrás en el tiempo mi función era todavía más grande, y necesitaba de un poco de jQuery. Con el tiempo la reduje hasta que quedó lo que ahora ven. Dejé esa línea de jQuery porque pensé que quizá en el futuro podría meter algo de jQuery y..., bueno, pues para no verme en la necesidad de escribirla de nuevo, la dejé ahí. Pensé que la cosa era inocua.

La cosa es que tal procedimiento resultó no ser tan inocuo como pensé. Si quito esa línea de jQuery, funciona como debe ser la ruta a los archivos CSS.

Lo raro ahora es que por alguna razón, la función, con esa línea de jQuery, trabaja sin problema si no tengo que utilizar el famoso ../ para ir atrás una carpeta. ¿Por qué?, ¡quién sabe!


..........................................

A propósito, gracias por responder, maestro PHPeros. Sí, ya conocía los comentarios condicionales de Internet Explorer. Pero nunca los he utilizado, esto porque desde que los vi, me desagradó la idea de mezclar en el mismo documento CSS las reglas de estilo para IE y para el resto de los navegadores. Se me hace muy engorroso, difícil de leer (y peor todavía si se utilizan los famosos hacks para IE5, IE6, etc, pfff!). Y no sólo eso: una vez hice una prueba y la cosa me desalentó aún más. Estaba trabajando colores RGBA y opacity. Internet Explorer 8 no los reconoce, así que empleaba los filtros Microsoft para emularlos. Ya no recuerdo ahora cuál era exactamente el problema, pero la cosa era que de alguna forma se contraponían los filtros con los RGBA y/o el opacity. La cosa era que cuando abría el documento web éstos funcionaba en el resto de los navegadores pero no los filtros IE, o al revés: funcionaban los filtros IE pero no los colores RGBA y el opacity. Algo así. Eso me dejó inmediatamente una muy mala impresión y por eso mi decisión de trabajar por separado el CSS para IE.

Mejor hago dos archivos CSS. Total, al fin y al cabo cada uno llega a pesar, si no es de plano muy exagerado su volumen, menos de 50 KS. Sin embargo, en el enlace que dejas, se hace referencia a un sitio que parece muy útil, y que hace por ti la conversión a condicionales IE tus reglas CSS. Así las cosas cambian un poco, pero un poco nada más, eh!, y esto, claro, si es que sirve .




Saludos y hasta pronto.

Última edición por berkeleyPunk; 23/02/2014 a las 14:25

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:23.