Copiar el contenido de una etiqueta con ID

regumiau · #1 (**permalink**) 30/04/2009, 10:15

Hola, estoy haciendo un script en lenguaje javascript unicamente, el cual debe copiar el contenido que hay dentro de una etiqueta como ser DIV que tiene ID y se encuentra en otra pagina HTML (otro archivo), creo una variable donde le indico la URL y, donde nececito reproducirlo simplemente hago un document.write(miVariable);

Todo esto seria muy facil si se tratase de solamente una variable en el mismo documento, y sin necesidad de ID:

<script language="javascript">
var miVariable = "Hola, mundo";
</script>
<script language="javascript">
document.write(miVariable);
</script>

pero esto que debo hacer es muy complicado y he buscado durante horas con google y no encontre respuesta, por esa razon planteo la pregunta aqui.

Ejemplo:

pagina1.html
<HTML>
<HEAD>
<TITLE>1</TITLE>
</HEAD>
<BODY>
<div id="texto">Imprime en pantalla este texto</div>
</BODY>
</HTML>

pagina2.html
<HTML>
<HEAD>
<TITLE>2</TITLE>
</HEAD>
<BODY>
<script language="javascript">
var miVariable = document.getElementById({pagina1.html}texto);
</script>
<script language="javascript">
document.write(miVariable);
</script>
</BODY>
</HTML>

La verdad que el ejemplo demuestra que estoy lejos, muy lejos jajajaa. Por esa razon solicito si es que alguien me puede ayudar a escribir este codigo y asi este disponible para quien lo necesite y ampliamos esta gran base de datos. Gracias

regumiau · #2 (**permalink**) 30/04/2009, 18:19

Hola nuevamente, les comento que continue estudiando este script ahora estoy mas cerca, jejejee.
Solo le faltan 2 funciones que cumplir:
1) que el contenido que extraiga se encuentre en otro archivo HTML y no en el mismo.

2) que pueda imprimir en pantalla mas de UNA linea.

Por el momento el script que he escrito logra copiar el contenido de un DIV con ID e imprimirlo en pantalla.
Aqui os dejo el script a ver si me ayudan a completar las 2 funciones que le faltan.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Variable en JavaScript</TITLE>
<script type="text/javascript">
function CopyPaste()
{
var copiar_original = document.getElementById("TEXTO_ORIGINAL");
var destino = document.getElementById("ESCRIBE_AQUI");

if (!copiar_original)
{
var _copiado = "";
}
else
{
var _copiado = copiar_original.firstChild.nodeValue;
}
var str = _copiado ;
destino.firstChild.nodeValue = _copiado;
}
</script>
</HEAD>
<BODY onLoad="javascript:CopyPaste();">
<div id="TEXTO_ORIGINAL">
1er linea de texto
<br>
2da linea de texto
</div>
<br>
<br>
<br>
<br>
<br>
<div id="ESCRIBE_AQUI"> </div>
</BODY>
</HTML>

Hasta pronto

regumiau · #3 (**permalink**) 02/05/2009, 18:10

Será posible que nadie escribe sobre este tema?
Será tan dificil que nadie ha podido responder todavía?

Espero que alguien pueda darme una mano pronto!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Fernand0 · #4 (**permalink**) 02/05/2009, 18:39

Aca nadie paga por contestar... no pretendas una respuesta inmediata...

Nadie te contesto.. porque seguramente nadie entiende que queres hacer... si entiendo bien... queres obtener el contenido de un elemento a partir del ID de un archivo X desde un archivo Y... puede ser eso?
Si es eso.. no estas lejos... estas lejisimo directamente..... explicate mejor y alguien te va a ayudar.... deberias de aprender mas del lenguaje antes de tratar de adivinar cosas como..
var miVariable = document.getElementById({pagina1.html}texto);

regumiau · #5 (**permalink**) 02/05/2009, 19:09

mmmm, parece que no leistes el ultimo mensaje que subi, donde explico mejor como hacer el script, hasta coloco un ejemplo que SI FUNCIONA, asi que ahora no estoy tan lejos, pero ya que te parece que no esta explicito esto tratare de detallarlo mas.

archivo 1.html
este archivo tiene un tag <DIV>bla bla bla</DIV>

archivo 2.html
este archivo tiene un script que IMPRIME en PANTALLA el contenido de ese DIV que se encuentra en el archivo 1.html

si no pueden comprender esto mejor no se tomen la molestia de escribir diciendo NO COMPRENDO.

El script que he dado anteriormente como ejemplo SI FUNCIONA y es para recoger el contenido de un DIV con ID pero solo imprime en pantalla UNA SOLA LINEA.

Si logro hacerlo ANTES que alguien pueda contestarlo lo colocare aqui para quien lo NECESITE, porque orgulloso no soy ni me mofo de quienes no pueden con un programa, ni egoista tampoco, ya que dedico muchas horas a la semana contestando muchas preguntas y enseñando cuanto puedo enseñar.

Fernand0 · #6 (**permalink**) 02/05/2009, 20:13

Si si.. lo lei al ultimo... era este... fue el primero que lei de hecho...

Cita:

Iniciado por regumiau

Será posible que nadie escribe sobre este tema?
Será tan dificil que nadie ha podido responder todavía?

Espero que alguien pueda darme una mano pronto!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Y dudo que a alguien le haya caido bien

David · #7 (**permalink**) 02/05/2009, 20:21

Lo que puedes hacer es usar Ajax (o en todo caso un iframe

) para obtener el contenido completo de 1.html y a partir de ahí tomar la parte que quieres mostrar.

regumiau · #8 (**permalink**) 03/05/2009, 01:51

David, tienes algun ejemplo de como podria usar Ajax para este objetivo? porque justamente no puedo usar iframe, ni tampoco PHP que de poder usarlo ya lo tendria resuelto con el file_get_contents().

regumiau · #9 (**permalink**) 03/05/2009, 03:39

En la constante busqueda, he encontrado un post en el cual formulan la misma pregunta pero direccionada a ajax como nos lo recomendama el amigo David el Grande (forosdelweb.com/f29/extraer-div-pagina-html-581275/), pero lamentablemente nunca nadie le respondio, y eso hace exactamente 1 año 29-abr-2008.
Que ciclica que es la vida!!!

David · #10 (**permalink**) 03/05/2009, 20:56

Si no sabes cómo usar Ajax puedes documentarte aquí:
http://www.forosdelweb.com/f77/faqs-...o-ajax-332366/

Básicamente, lo que tienes que hacer es una petición de la página y cuando recibas la respuesta con el contenido del HTML extraer el contenido que desees (con las funciones de manejo de texto o con una expresión regular)

regumiau · #11 (**permalink**) 03/05/2009, 21:05

Y tu serias tan amable de poder dar un ejemplo? que si abri la cuestion en este foro es porque solicito que me ayuden con un ejemplo, sino hubiese hido directamente a los manuales, no crees? y hablo por muchos, ya que habra muchos mas que necesiten hacer un script como este. Pero debo recalcar que en 4 años que estoy en este foro nunca me contestaron o solucionaron una cuestion. Gracias de todas formas.

Fernand0 · #12 (**permalink**) 07/05/2009, 13:43

Cita:

Iniciado por regumiau

blah.. blah.. blah...

ya que dedico muchas horas a la semana contestando muchas preguntas y enseñando cuanto puedo enseñar.

Anda a saber porque tenes 10 mensajes si supuestamente estas hace 4 años y te la pasas ayudando...

Cita:

Iniciado por regumiau

Y tu serias tan amable de poder dar un ejemplo? que si abri la cuestion en este foro es porque solicito que me ayuden con un ejemplo, sino hubiese hido directamente a los manuales, no crees? y hablo por muchos, ya que habra muchos mas que necesiten hacer un script como este. Pero debo recalcar que en 4 años que estoy en este foro nunca me contestaron o solucionaron una cuestion. Gracias de todas formas.

Si hace 4 años que estas en este foro y nadie te SOLUCIONO nada(solucionar? yo que sepa aca se ayuda.. no se soluciona... la parte de la solucion la tenes que hacer vos.... pero bueno... si te pensas que todos tienen que estar a tus pies esta bien que creas eso).... pero para que seguis en este foro? si nadie te puede solucionar nada.. y encima le hablas a la gente como se te da la gana...

Aca los colaboradores ayudan por gusto... no me parece que sea el trato para alguien que ayuda por placer..... ni tampoco para alguien que te ayuda por obligacion ya que nadie te hablo mal.... media pila... anda a hacer conflicto a otro lado....

regumiau · #13 (**permalink**) 07/05/2009, 14:05

Es una lastima que solo contestan para buscar pleito en vez de colaborar, eso de muy maleducado, hay que dar soluciones en los foros, sino mejor ni abrir un foro solo por decir que se tiene un foro, y lo unico que hacen es pasarle los mail de uno a publicistas, que ya mucha publicidad me ha llegado desde que entre a este foro, y me respondieron que de este foro le dieron mi mail.
Pero mejor no entrar en discuciones y ponerse a programar.

Les cuento que navegando he encontrado un script que responde a esta necesidad pero es en AJAX, y el unico problema que da es que no funciona en FireFox por cuestiones de seguriadad solo cuando la pagina HTML incluida es de otro dominio.
Aqui les dejo el codigo chequeado y funcionando:
<html>
<head>
<title>Carga externa de datos</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" language="javascript">
function nuevoAjax(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}

if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function cargarContenido(){
var contenedor;
contenedor = document.getElementById('contenedor');
ajax=nuevoAjax();
ajax.open("GET", "id_texto.html",true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
contenedor.innerHTML = ajax.responseText
}
}
ajax.send(null)
}
window.onload= function(){cargarContenido()}
</script>
<style type="text/css">
#contenedor{
border: 1px solid #f00;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>

Este ejemplo cargará la página <a href="id_texto.html">id_texto.html</a> y lo pondrá dentro del siguiente div:

<div id="contenedor">div contenedor</div>
</body>
</html>

archivo id_texto.html
<HTML>
<HEAD>
<TITLE>texto</TITLE>
</HEAD>
<BODY>
<div id="TEXTO_ORIGINAL">
1er linea de texto
<br>
2da linea de texto
</div>
<span>aqui hay mas texto pero dentro de una etiqueta SPAN</span>
</BODY>
</HTML>

como dije anteriormente a este script lo encontre navegando. En algunos foros sale el mismo pero tienen errores, este esta corregido y funciona, seguro que a alguien le servira. Yo por el momento sigo buscando como cazar solamente una etiqueta de alli dentro o un ID.
esta es mi segunda aportacion de codigos, lo digo para aquellos getones que sueltan palabras antes de pensar.

David · #14 (**permalink**) 07/05/2009, 14:22

Estimado, regumiau.

No suelo dar ejemplos hechos sobre cuestiones que ya están en los manuales porque creo que dirigiendo al usuario al manual este aprenderá más.

En cuanto a tu pregunta de cómo extraer de allí el id, puedes usar una expresión regular o buscar en la cadena el elemento deseado con el método indexOf.

lobo_php · #15 (**permalink**) 07/05/2009, 14:36

cada vez gente mas desagradecida, si a uno le pasan un manual uno aprende mas que le pasen las cosas, te pasaras toda la vida preguntando... en el mismo foro

regumiau
Fecha de Ingreso: julio-2005
Mensajes: 11

11 mensajes desde el 2005, de los cuales 8 son en este post. no critico su poca actividad, yo llevo mas de 600 y casi todos han sido por pedir ayuda y aunq no el 100% de las veces he podido solucionar las cosas, cuando me dan una explicacion o me mandan a leer faqs es donde aprendo mas. si me han dado ejemplos es por que tienen la posibilidad, el tiempo o el conocimiento de hacerlo, aca a nadie se obliga para solucionar tus problemas

no siendo mas... Cambio y Fuera

gabrielc200 · #16 (**permalink**) 13/06/2009, 15:45

Hola Regumiau
Por un lado, lamento haberme encontrado con este tema tan tarde.
No creo necesario el uso de AJAX aunque tambien es válido, sobre todo dependiendo el uso que se le da.
Una opcion posible es la siguiente
---------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Variable en JavaScript</TITLE>
<script type="text/javascript">
function CopyPaste(){
var copiar_original = document.getElementById("TEXTO_ORIGINAL");
var destino = document.getElementById("ESCRIBE_AQUI");
if (!copiar_original){
var _copiado = "";
}else{
var _copiado = copiar_original.innerHTML;
}
var str = _copiado ;
destino.innerHTML = _copiado;
}
</script>
</HEAD>
<BODY>
<div id="TEXTO_ORIGINAL">
1er linea de texto
<br>
2da linea de texto
<br><div> y más lineas de texto jejejeje</div>
</div>
<form onsubmit="CopyPaste();return false">
<input type="submit" name="copiar" id="copiar" value="copiar y pegar en diferentes divs" />
</form>
<br>
<div id="ESCRIBE_AQUI"> </div>
</BODY>
</HTML>
------------

reemplace firstChild.nodeValue por innerHTML y funcionó en todos los navegadores, logrando el objetivo que habías planteado.

Repito es solo otra opción.

Espero que le sirva a alguien mas .
Saludos!!