HTML5 - No permite carga CSS con Javascript

dertin01 · #1 (**permalink**) 09/09/2013, 07:19

Edito: Solo pasa en servidor Localhost con HTML5.

Hola, no entiendo porque no funciona este codigo con el doctype de HTML5 y sin el no da problema, probado en Firefox, y Chrome. Usando firebug para mirar la carga del CSS.

El problema es que no logra cargar el CSS de forma correcta con el Doctype de HTML5.

Pueden probar con un css cualquiera y agregar algun elemento con class, para verlo.
Les dejo aqui abajo el codigo base, ustedes le agregan el css, que como pueden ver va dentro de una carpeta css y el archivo con nombre mycss.css.

No quiero usar Jquery, solo Javascript Puro.

Código HTML:

Ver original<!DOCTYPE html> <!-- Si quito el DOCType funciona -->
<html>
    <head>
        <script type="text/JavaScript" data-cfasync="false">
            (function() {
            var nomarch = 'css/mycss';
            var d = new Date();
            var cssLink=document.createElement("link");
            cssLink.rel = "stylesheet";
            cssLink.type = "text/css";
            cssLink.href = nomarch+".css?rnd="+d.getTime();
            cssLink.crossOrigin = "Anonymous";
            cssLink.media = "all";
            document.getElementsByTagName("head")[0].appendChild(cssLink);
            })();
        </script>
    </head>
    <body>
    </body>
</html>

Reporte el problema a Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=914163), a ver si se sabe de este problema;
he visto por Google problemas con servidores localhost y el uso de html5.

Gracias,

zerokilled · #2 (**permalink**) 09/09/2013, 08:10

buenas...
¡bienvenido a forosdelweb!

el ejemplo que pones me ha funcionado correctamente en chrome. solo lo comprobé en chrome con el doctype. sospecho que el problema puede deberse a dos cosas: el content-type del script y momento de ejecucción del script. el content-type (atributo type) entiendo que debería ser text/javascript en minúsculas. aunque no estoy seguro si puede haber diferencia entre minúsculas y mayúsculas. en todo caso, recuerdo que si indicabas un type no adecuado en iexplorer el script no iba.

el momento de ejecucción puede ser otro factor. en particular, el detalle de modificar el DOM mientras el navegador esta creandolo. si te fijas, el script está modificando el elemento HEAD antes de que el navegador haya terminado de crearlo. en algunos navegadores suele reflejarse ese problema, en otros no tanto.

lo mejor que puedes hacer es mirar la consola del navegador y determinar si imprime algún mensaje de error. reitero que a mi me ha funcionado bien.

dertin01 · #3 (**permalink**) 09/09/2013, 08:27

zerokilled:

Gracias por la respuesta, voy a seguir metiendo mano, el problema solo ocurre en mi servidor local, montado en centos 6.4, no lo he probado en un servidor local montado en windows, por ejemplo wampserver, fijate si lo podes correr en un ambiente local.

Te dejo el codigo fuente con el CSS que estoy usando para verificar. http://buscoinmueble.com.uy/bug-localhost-html5-js-css.zip

Ahora mismo me esta dando este otro error, este error me sale en el firebug, en lugar de cargar del codigo CSS: " La fuente de esta URL no es texto: http://127.0.0.1/bug-localhost-html5-js-css/css/mycssfile.css?rnd=1378736293754 "

Pienso que el servidor descarga el css, no lo muestra como texto plano. Lo voy a tratar de arreglar por .htaccess, o sino es algun permiso del archivo.

Pero con arreglar esto, tengo igual el otro problema.

Si consigo algo, les comento por aqui.

zerokilled · #4 (**permalink**) 09/09/2013, 09:48

he probado ambos documentos en local y me funciona correctamente. no tengo un servidor para poder comprobarlo. cuando dices pienso que el servidor descarga el css, es muy ambigüo esa descripción. primero, quien descarga el archivo es el navegador, y segundo debe descargarlo porque de lo contrario no tendría sentido. quizas sea el tipo de permiso que contiene el archivo o el modo en que el servidor sirve el archivo. pude notar que el archivo tiene permisos de ejecutable aunque no creo que afecte porque de todas formas me funcionó. por cierto, ambos documentos tienen el doctype html. xD

dertin01 · #5 (**permalink**) 09/09/2013, 11:19

Lo he solucionado, el problema estaba en la configuracion de apache del servidor.

En httpd.conf tenia algo asi :

DocumentRoot "/home/dertin/www"

Y no tenia definido para ese directorio que es la Raiz, la configuracion de apache.
entonces le agregue algo asi:

<Directory "/home/dertin/www">

Options Indexes MultiViews +FollowSymlinks +SymLinksIfOwnerMatch
AllowOverride All
Order allow,deny
Allow from all

</Directory>

Con hacer estos ajustes en el httpd.conf logue resolver el problema.

Gracias,