XHTML no acepta document.write y <noscript>

August · #1 (**permalink**) 25/06/2006, 16:21

En este mensaje estoy batallando porque tengo que validar una pagina en XHTML transicional, lo cual no acepta el <noscript> y tampoco que el document.write de Javascript imprima el img

Entonces se me ocurrio usar AJAX y me gustaria me dijeran como hacerle, la idea es obtener el screen.width en JavaScript y enviarla en "tiempo real con AJAX" a la aplicacion y que continue viva esta variable manteniendola como SESSION, sin embargo hasta ahorita no me ha funcionado

http://www.forosdelweb.com/showthrea...52#post1600052

intento hacer esto, pero no lo valida

<script type="text/javascript">
document.write('<img src="http://augustino.net/IMA/?resolucion='+screen.width+'&id=goarrow" alt=""/>');
</script>
<noscript>
<img src="http://augustino.net/IMA/?resolucion=800&id=goarrow" alt=""/>
</noscript>

Debo usar XHTML por que en esa misma pagina uso menus que son solo compatibles con XHTML

Saludos, haber si alguien me puede decir como, gracias de antemano

#2 (**permalink**) 26/06/2006, 13:41

Usá innerHTML para cambiar el código de un elemento, es decir:

Código:

<div id="imagen">
<img src="http://augustino.net/IMA/?resolucion=800&amp;id=goarrow" alt=""/>
</div>

y en javascript:

Código:

imagen = document.getElementById("imagen");
imagen.innerHTML = '<img src="http://augustino.net/IMA/?resolucion='+screen.width+'&amp;id=goarrow" alt=""/>';

innerHTML representa el html dentro de un elemento, también existe innerText que representa el texto dentro del elemento.

Saludos.

August · #3 (**permalink**) 26/06/2006, 22:05

Todavia dice el validador de la W3C que XHTML no permite tener el IMG dentro de la etiqueta SCRIPT

#4 (**permalink**) 27/06/2006, 09:28

entonces, lo que podés hacer es ponerle un id A LA ETIQUETA IMG, poner la etiqueta en el html, y luego en el javascript cambiar únicamente el atributo src:

Código:

imagen.src = 'http://augustino.net/IMA/?resolucion='+screen.width+'&amp;id=goarrow';

Saludos.

thunder.scripts · #5 (**permalink**) 28/06/2006, 16:52

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Test</title>
</head>

<body>

<script type="text/javascript">
/*<![CDATA[*/
	document.body.innerHTML = '<img src="http://augustino.net/IMA/?resolucion='+screen.width+'&amp;id=goarrow" alt=""/>';
/*]]>*/
</script>

<noscript>
	<div><img src="http://augustino.net/IMA/?resolucion=800&amp;id=goarrow" alt=""/></div>
</noscript>

</body>
</html>

De todas formas me parece más práctico dejar la imagen con la url por defecto y cambiarla con javascript (como dice alvlin). Además, innerHTML no es estándar, la forma "correcta" de hacer esto es crear la imagen usando el DOM.

Suerte
Fede

tunait · #6 (**permalink**) 29/06/2006, 00:22

También podrías pedírselo así

imagen.innerHTML = '<im' + 'g src="http://augustino.net/IMA/?resolucion='+screen.width+'&id=goarrow" alt=""/>';

Un saludo

August · #7 (**permalink**) 29/06/2006, 11:22

Realmente muchas gracias, de hecho en lugar de usar un IMG ahora usare un IFRAME por que W3C no valida IMG sin SRC y con solo un ID

Esto forma parte de un aplicacion que estoy usando, lo lamentable es que no logro carge a "tiempo" el IFRAME y no hago funcionar el AJAX, aqui pueden ver el SCRIPT completo, espero que con toda la experiencia en JavaScript y tecnologias de lado cliente de los usuarios presentes puedan ayudarme

http://www.forosdelweb.com/showthrea...33#post1605333

#8 (**permalink**) 29/06/2006, 13:31

Esperá un poco, en ningún momento se te sugirió que usaras IMG sin src, solo te dijimos que lo cambiaras con javascript, pero podés ponerle al cargar la página un valor por defecto, una imagen en blanco, o simplemente "" como valor.

Saludos.

thunder.scripts · #9 (**permalink**) 29/06/2006, 15:58

¿¿Un iframe?? ughh...
Por lo que entendí, tu script carga una imagen (presumo generada dinamicamente) distinta de acuerdo a la resolución del usuario. De no tener javascript activado, carga una imagen por defecto.

Entonces, lo que sugerimos antes es que insertes la imagen por defecto y la reemplaces por la dedicada a cada resolución usando JavaScript. De esta forma la imagen siempre está, y sólo cambia si tienen JavaScript activado.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Untitled Document</title>
	<script type="text/javascript">
	/*<![CDATA[*/
		window.onload = function() {
			document.getElementById('goarrow').src = 'http://augustino.net/IMA/?resolucion='+screen.width+'&amp;id=goarrow';
		}
	/*]]>*/
	</script>
</head>

<body>
	<div><img src="http://augustino.net/IMA/?resolucion=800&amp;id=goarrow" alt="PONÉ ALGO ACÁ POR FAVOR, ALGO CON SIGNIFICADO :D" id="goarrow" /></div>
</body>
</html>

El único problema es que hasta que se cargue toda la página no va a cambiar la imagen. Para solucionarlo, podrías poner el script directamente debajo del div (sin el evento, sólo la asignación):

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Untitled Document</title>
</head>

<body>
	<div><img src="http://augustino.net/IMA/?resolucion=800&amp;id=goarrow" alt="PON&Eacute; ALGO AC&Aacute; POR FAVOR, ALGO CON SIGNIFICADO :D" id="goarrow" /></div>
	<script type="text/javascript">
	/*<![CDATA[*/
		document.getElementById('goarrow').src = 'http://augustino.net/IMA/?resolucion='+screen.width+'&amp;id=goarrow';
	/*]]>*/
	</script>
</body>
</html>

Personalmente prefiero la primer forma, más aún colocando el JS en un archivo externo y linkeándolo. Pero bueno, a veces el efecto debe ser instantáneo y hay que ensuciar un poco el html (quizás haya otra forma de hacerlo, no se me ocurre como) :(

Suerte
Fede