Mostrar el html generado de una funcion, como????

sanapo · #1 (**permalink**) 21/09/2005, 13:39

Hola a todos, me gustaria saber como poder mostrar el html generado por una funcion javascript y que sea visible desde el codigo fuente el html y no la llamada al script. Es para optimizar mi web ante la indexacion de google.

Espero que alguien sepa algo, me ayudaria muchisimo

Un saludo a todos y gracias de antemano.

flaviovich · #2 (**permalink**) 21/09/2005, 14:25

document.write('tu codigo');
Eso?

sanapo · #3 (**permalink**) 21/09/2005, 14:39

no es exactamente eso. yo lo que persigo es lo siguiente:
<script>
mifuncion() {

document.write("<p> saludos </p>");

}
</script>
<body>
.....
unas cuantas lineas más
<script>mifuncion();</script>

en definitiva cuando le doy a ver el codigo fuente de este html poder visualizar <p> saludos </p> en vez de <script>mifuncion();</script>

No se si me explico.

sanapo · #4 (**permalink**) 21/09/2005, 14:42

se me olvido comentar que sino es posible eso, por lo menos poder guardar el resultado de esa funcion que se encuentra en un script remoto en una variable y poder mostrar ese html por pantalla sin ejecutar directamente la funcion del script externo.

furoya · #5 (**permalink**) 24/09/2005, 14:45

Hola sanapo , flaviovich :

No sé si entiendo. Pero cuendo uno quiere revisar el contenido de su página (especialmente para descubrir algún error) se usa un bookmarklet desde la addressbar.

Este sería un ejemplo de página

Código:

<HTML>
<head>
<script>
function mifuncion(){
document.write("<p id='generado'> saludos </p>");
}
</script>
<style>
#generado{color:#000;}
#d0{border:3px solid red;}
#d1{border:3px solid green;}
#d2{border:3px solid blue;}
#d3{border:3px solid silver;}
#d4{border:3px solid black;}
div{padding:2px; text-align:center}
</style>
</head>
<body>
<p>unas cuantas lineas más</p>
<p>unas cuantas lineas más</p>
<p>unas cuantas lineas más</p>
<p>unas cuantas lineas más</p>
<script>mifuncion()</script>

<br /><br /><br />

<div id="d4">qweryup4
<div id="d3">qweryup3
<div id="d2">qweryup2
<div id="d1">qweryup1
<div id="d0">qweryup0
</div>
</div>
</div>
</div>
</div>
<br />
</body>
</html>

Y estos algunos bookmarklets de ejemplo

Código:

 
<!-- 		TODOS PARA IE

	PARA VER EL CONTENIDO DE LA ETIQUETA, USANDO ID
javascript:alert(document.getElementById("generado").innerHTML)


	PARA VER EL CONTENIDO Y LA ETIQUETA, USANDO ID
javascript:alert(document.getElementById("generado").outerHTML)


	PARA VER EL CONTENIDO Y LA ETIQUETA, USANDO EL INDEX DE TAG
javascript:alert(document.getElementsByTagName("p")[4].outerHTML)


	PARA VER LOS CONTENIDOS Y LAS ETIQUETAS, USANDO COLECCIÓN DE TAGS CON INDEX DE PÁRRAFO
javascript:var%20bW2Ks='';for(q=0;q<document.getElementsByTagName("p").length;q++){bW2Ks+=document.getElementsByTagName("p")[q].outerHTML+'\tP'+q+'\r\n'};alert(bW2Ks)


	PARA VER COLOR ASIGNADO EN ESTILO O DEFAULT
javascript:alert('color:'+document.getElementById("generado").currentStyle.color)


	PARA VER LOS CONTENIDOS Y LAS ETIQUETAS, USANDO COLECCIÓN DE TAGS EN NUEVA VENTANA
javascript:var%20bW2Ks='';for(q=0;q<document.getElementsByTagName("p").length;q++){bW2Ks+=document.getElementsByTagName("p")[q].outerHTML+'\r\n'};var%20mJ2Ft=open();mJ2Ft.document.write('<PLAINTEXT>'+bW2Ks);void(0)


	PARA CONOCER EL NÚMERO DE INDEX GENERAL, CON DOBLECLICK
javascript:void(window.document.ondblclick=function(){prompt(window.event.srcElement.innerHTML,window.event.srcElement.sourceIndex)})


	PARA VER EL CONTENIDO POR NÚMERO DE INDEX GENERAL
javascript:alert(document.all[prompt('Escriba%20Index%20general%20en%20documento%20:','')].innerHTML)

Nota :	el escript que contiene miFuncion() tiene index 3
¯¯¯¯	el escript que ejecuta miFuncion() tiene index 10


	PARA VER EL CONTENIDO Y LA ETIQUETA, CON DOBLECLICK
javascript:void(window.document.ondblclick=function(){alert(window.event.srcElement.outerHTML)})


	PARA VER EL CONTENIDO HASTA UN NIVEL DE parentElement, CON DOBLECLICK
javascript:void(window.document.ondblclick=function(){var%20qF6Ju=window.event.srcElement;var%20gH6Px=qF6Ju;var%20dS4Iy=0;while(gH6Px.tagName!='HTML'){gH6Px=gH6Px.parentElement;dS4Iy+=1};var%20kH7Oy=prompt('¿Hasta%20qu%e9%20nivel%20desea%20ver?\r\nMaximo%20:',dS4Iy);if(kH7Oy){for(m=0;m<kH7Oy;m++){qF6Ju=qF6Ju.parentElement};alert(qF6Ju.outerHTML)}})


-->

Los códigos en azul se copian y pegan en la barra de direcciones y se ejecutan con un click. No tienen espacios, si aparece alguno agregado por el editor del foro, hay que borrarlo.

Saludos

furoya

Cap.Buscapina · #6 (**permalink**) 24/09/2005, 15:57

como yo lo entiendo, mediante una funcion estas generando codigo html, y lo que quieres que el usuario vea ese codigo que generas (ademas de su resultado).

Si es así, no se si se puede ver en el codigo fuente , pero si podrías ir guardando ese codigo en una variable y luego asignárcelo a un textarea.

siguiendo con tu ejemplo:

Código PHP:

  <script> 
  function mifuncion(){ 
var codigo="<p id='generado'> saludos </p>"; 
document.write(codigo); 
document.getElementById('id_del_textarea').value=codigo; 
 
 
  }    </script>

sanapo · #7 (**permalink**) 25/09/2005, 03:32

muchisimas gracias, voy a probar a ver que tal y si logro algo os lo hago saber, esta pregunta es poco comun pero seguro que mas de una persona la ve util.

Un saludo

sanapo · #8 (**permalink**) 25/09/2005, 03:47

Pues me sirve pero exactamente no es lo que busco. A ver si me explico detenidamente. Yo tengo un archivo.js en http://www.misitio1.com/scripts/archivo.js

y desde http://www.misitio2.com/web/index.php quiero ejecutar ese archivo.js

La manera de incluirlo es <script src="http://www.misitio1.com/scripts/archivo.js"></script> y tambien el codigo que lleva el archivo.js es una funcion que muestra un <iframe>.

Lo que yo busco es la forma de guardar esa funcion en una variable para luego aplicarle una de las alternativas que me habeis dado pero la cosa es si esta bien el include ese del script y si esa funcion del script externo puedo volver a ejecutarla de la siguiente manera:

var mivariable = mostrarIframe();

Espero haberme explicado mejor para que podamos resolver este asunto tan interesante ;)

caricatos · #9 (**permalink**) 25/09/2005, 04:44

Hola:

Tal vez quieras lo que tengo en mi probador de scripts... http://www.pepemolina.com/probador/index.html

Se trata de meter código en un textarea, y escribir en un iframe el contenido del mismo...

Saludos

sanapo · #10 (**permalink**) 25/09/2005, 04:52

No es exactamente eso caricatos pero es un script genial el que has hecho, enhorabuena! :D. Basicamente el problema radica en poder meter en una variable una funcion, es decir, variable = funcion(); y que en la variable se guarde el codigo generado en html que muestra la funcion, concretamente rescatar todos los document.write de la funcion.

Un saludo y muchisimas gracias por colaborar ;)

flaviovich · #11 (**permalink**) 25/09/2005, 05:52

Quizas por aca vaya la cosa:

Código:

var x = document.getElementsByTagName("script");
alert(x[0].innerText);

Solo faltaria, cómo ubicar tu función.

sanapo · #12 (**permalink**) 25/09/2005, 06:15

flaviovich puedes escribirme un ejemplo completo? es que no se mucho de javascript, lo mio es php, por eso no estoy muy puesto en javascript y no lo entiendo del todo bien

Lo que persigo es llamar una segunda vez a la funcion remota y rescatar el html de su salida porque la funcion tiene principalmente muchos document.write que escriben html.

flaviovich · #13 (**permalink**) 25/09/2005, 06:44

Y por qué no le pones un return a tu funcion. Por ejemplo asi:

Código:

function f()
{
  var codigo = "<br>";
  document.write(codigo);
  return codigo;
}

Lo que te escribi, creo que no te servira. Aunque no lo he analizado mas a fondo.
Prueba esta forma, o ya habra alguien que dé alguna idea mejor.
Suerte!

sanapo · #14 (**permalink**) 25/09/2005, 07:27

el problema que tengo es que el archivo.js me lo deja un conocido para insertarlo en mi web pero no puedo modificar su contenido, de ahi este post, quiero obtener el html de la funcion esa sin tener que recurrir a modificarlo. Por eso estoy documentandome y preguntando aqui en el foro.

Un saludo

caricatos · #15 (**permalink**) 25/09/2005, 08:24

Hola otra vez:

Si quieres saber el contenido de una función, puedes obtenerlo a partir del objeto window, ya que todas las definiciones cuelgan de ese objeto...

Ejemplo:

Código:

<html>
<head>
<script>
function x(){
 return "x";
}
</script>
<head>
<body>
<button onclick="alert(window['x'])" >púlsame</button>
</body>
</html>

Puedes pegarlo directamente en el probador que te señalé antes...

Para mostrarte un ejemplo más completo puedes ver el destripador de páginas: http://www.pepemolina.com/DOM/destripador.html

... otra cosa interesante (ya te muestro mi currículum) es el inspector DOM: http://www.pepemolina.com/DOM/ (por si te puede servir para algo)

Saludos

flaviovich · #16 (**permalink**) 25/09/2005, 08:31

Pero si la funcion esta en archivo *.js?
Servira la funcion toSource()?

sanapo · #17 (**permalink**) 25/09/2005, 09:02

mmm interesantes respuestas, voy a probar y os cuento a ver que tal ;)

sanapo · #18 (**permalink**) 25/09/2005, 09:07

Caricatos, gracias por la ayuda de windows, me sirve para lo que buscaba solo que me gustaria saber si una vez que llamas a window['funcion'] puedo acceder tambien a window['funcion']['variable']. es posible eso? creo que obteniendo eso obtendria la solucion a mis problemas ;) y en cuanto lo haga pongo un ejemplo para que la gente pueda ver como funciona ;)

Un saludo

caricatos · #19 (**permalink**) 25/09/2005, 09:10

Hola:

La verdad es que no conocía el método toSource(), pero en uno de los navegadores que lo probé no funcionó... hay otro método que hace lo mismo que no usar métodos que es toString(), y es una cosa que puede "redefinirse" como cualquier otra cosa...

Código:

<html>
<head>
<script>
function x(){
 return "x";
}
Function.prototype.toString = function() {
return "Hola";
}
</script>
<head>
<body>
<button onclick="alert(window['x'] + x())" >púlsame</button>
</body>
</html>

Por cierto, con ficheros externos, con explorer se me bloquearon mis pruebas, pero tanto con mozilla como con opera no he tenido problemas.

Saludos

sanapo · #20 (**permalink**) 25/09/2005, 09:19

No acabo de comprender tu codigo caricatos, con eso puedo mostrar una variable en concreto de la funcion? es decir

function x() {

mivariable = "hola";

return mivariable;

}

y poner un determinado codigo como el que has hecho para que muestre "hola"?

programeitor · #21 (**permalink**) 25/09/2005, 12:57

En vez de poner el script:

document.write('tal')
document.write('cual')

puedes hacer:

function talcual()
{
variable='tal'
variable+='cual'
document.write(variable)
return variable
}

y la llamas asi, recigiendo al mismo tiempo lo que se ha impreso:

datosimpresos=talcual()

sanapo · #22 (**permalink**) 28/09/2005, 02:04

Hola amigos, ya encontre la solución y era mas facil de lo que os podeis imaginar.

Tenemos un archivo .js con la siguiente funcion:

function mifuncion () {

mivariable = "<p>Hola</p>";
document.write (mivariable);

}

Este archivo lo incluiamos en una pagina html y para obtener el html correspondiente a la variable solo tenemos que hacer lo siguiente:

<script src=archivo.js></script>
<script language="Javascript">

variable2 = mivariable;

document.write (variable2);
</script>

La razón por la que podemos hacerlo asi viene dado por la declaración de las variables.
Si declaramos una variable con var estamos diciendole que esa variable es local, es decir, solo se ejecuta dentro de la funcion o parte de codigo en la que se encuentra. Sin embargo al declararla sin var estamos creando una variable global, accesible desde cualquier parte del documento.

Gracias a todos los que me habeis ayudado escribiendo posibles soluciones, al resto de personas aqui os dejo la solución que seguro que alguna vez os puede servir.

Un saludo.