como abrir una pagina en una capa div??

canariozgz · #1 (**permalink**) 01/12/2006, 02:42

Hola compañeros que tal va eso?? Haber si me explico, tengo una página web con 3 capas divs, y lo que me gustaria hacer es que desde un enlace de una capa de esas me abriera en otra capa una página por ej o el contenido que fuera, eso se puede hacer con html, javascript?? teneis una minima idea?? alguna ayudita??

un saludo y gracias

javioreto · #2 (**permalink**) 01/12/2006, 18:26

saludos, a que te refieres con "capas"? puedes hacer en el div añadir el comando onclick:

<div onclick="document.location.href='http://"></div>

pablinff · #3 (**permalink**) 02/12/2006, 11:18

O podes hacerlo con AJAX, llamando asincronicamente a una página que no tiene los tags body ni head ni html, puesto que los hereda de la página donde se encuentra el DIV.
Sería algo así:
principal.html

Código:

<html>
<Head>
</Head>
<Body>
<a href="javascript:llamarasincrono('lapaginaquequieras.html', 'contenedor')">lapaginaquequieras.html</a>
<div id="Contenedor"></div>
</Body>
</html>

entonces de esta manera podrás cargar asincronicamente la página que quieras dentro del DIV de la página principal.html
Esto así solo no funcionará, se necesita uun archivo Js que lo incluís y ya está, pero avisame si es esto lo que buscás y te paso el código

Saludos!

canariozgz · #4 (**permalink**) 04/12/2006, 09:55

hola pablinff gracias por la respuesta me podrias pasar eso si me harias un favor y lo probare haber si me vale para lo que necesito.

es que segun lo que me dice javioreto no me vale porque yo quiero que se cargue la pagina en el div cuando pinche en un link, no cuando pase el raton x encima

gracias de todos modos

pablinff · #5 (**permalink**) 04/12/2006, 19:21

Esque lo que yo te estoy pasando funciona con u link, como vos querés.
Acá te paso el código:
codigo.js

Código:

// Documento JavaScript
// Esta función cargará las paginas
function llamarasincrono(url, id_contenedor){
var pagina_requerida = false
if (window.XMLHttpRequest) {// Si es Mozilla, Safari etc
pagina_requerida = new XMLHttpRequest()
} else if (window.ActiveXObject){ // pero si es IE
try {
pagina_requerida = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){ // en caso que sea una versión antigua
try{
pagina_requerida = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
pagina_requerida.onreadystatechange=function(){ // función de respuesta
cargarpagina(pagina_requerida, id_contenedor)
}
pagina_requerida.open('GET', url, true) // asignamos los métodos open y send
pagina_requerida.send(null)
}
// todo es correcto y ha llegado el momento de poner la información requerida
// en su sitio en la pagina xhtml
function cargarpagina(pagina_requerida, id_contenedor){
if (pagina_requerida.readyState == 4 && (pagina_requerida.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(id_contenedor).innerHTML=pagina_requerida.responseText
}

mogoxd · #6 (**permalink**) 19/01/2008, 16:56

Muxas gracias pablinff. LLEvo horas buscando, y tu me has dado la solucion. Lo habia visto hacer con php, pero no lo encontre. Tambien lo habia visto con iframes, pero no me gustaba la idea.

Lo unico que falta decir es que se tiene que poner en el head esto:

<Head>

<script src="ruta/enlaces.js" type="text/javascript"></script>

</Head>

Ahora la duda que tengo. Has dixo que hereda head, body,etc. Supon que necesito llamar un script especifico o algo por el estilo. Tendria que definirlo en el index principal verdad? O simplemente hereda los atributos de este, con lo que se puede definir el head y demas tambien?

Gracias y cordiales saludos

LOOOOOOOLLL!!! Es un post del 2006, y yo preguntando, lo siento muxo. De todas formas si alguien me puede responder...

pablinff · #7 (**permalink**) 19/01/2008, 21:37

Buenas! la verdad es que estas con suerte de que este suscripto a las respuestas de este mensaje aún!
Bueno primero vale aclarar de que hay que incluir "codigo.js" dentro del tag head de la página principal (o donde estará el link y la capa contenedora) de la siguiente manera:

Código PHP:

  <Head>

 
<script src="codigo.js" type="text/javascript"></script>

 
</Head>

Respondiendo a tu pregunta sobre la herencia de los tags body, head, etc:
Simplemente lo que hace este script es agarrar un trozo de código definido en un archivo externo e introducirlo dentro del contenedor que has asignado, osea que si vos llamás asincrónicamente a un archivo que tenga por ejemplo:

Código PHP:

  <div id="colores"><p onclick="funcion();">Colores!!!</p></div>

Ese "div" junto con el "p" tomará los atributos que hayas definido para ese tipo de tags en tus hojas de estilos, de esta forma "colores" también deberá estar definido en tu hojas de estilos.
Yendo un poco mas al grano si vos haces uso de una función javascript("funcion();") que tengas definida en el tag head de tu página principal la no habrá ningun problema y funcionará correctamente.
Espero se entienda.
Saludos!

mogoxd · #8 (**permalink**) 21/01/2008, 10:15

Bueno tiuuu. Gracias por la aclaracion. De todas formas he estado probando, y para paginas mas completas es mejor hacer lo de cargar el codigo, mediante php, pues con este metodo es como si no cambiaras de pagina y el ticipo atras no funciona, a no ser que gestiones la paginas de forma correcta para incluir esos botones tambien.

Para paginas simples y de contenido muy preciso, es una grandisima solucion.

Saludos y gracias

pablinff · #9 (**permalink**) 22/01/2008, 03:31

Claro la ventaja que tiene este método es que carga asincronicamente las página sin recargar todo el código restante.
La forma que plnateás vos es conocida como programación modular, en donde el concepto es que mediante un "id" pasado por un querystring se elige que página se cargará.
A continuación el código:

Código PHP:

 
<div id="contenedor">

 <?php

    if (file_exists("$_SERVER[DOCUMENT_ROOT]/modulos/$_GET[id].php")) 

    include("$_SERVER[DOCUMENT_ROOT]/modulos/$_GET[id].php");

    else include("$_SERVER[DOCUMENT_ROOT]/modulos/paginapordefecto.php");

 ?>

</div>

la url que se utilizaría en este caso sería algo así:
http://www.tudominio.com/index.php?id=modulo
Entonces cargará la página que vos le des por nombre de "modulo", y si no existiese o id sea nulo se cargará "paginapordefecto.php".

Saludos!

mogoxd · #10 (**permalink**) 24/01/2008, 03:20

Muy buena tio, ese codigo ya lo conocia, aunque la puedes pasar canutas para encontrarlo por internet. Sabes por casualidad paginas donde poder encontrar codigos para este tipo de cosas o mas? yo conozco alguna pero de javascript, y ajax y demas, pues no.

Por cierto, me replantee el uso del codigo de ajax y simplemente por un tema. Tengo una pagina con flash y actionscript que necesito que no se recargue. Asi que la solucion esa me bien al dedillo. Al fin y al cabo si lo piensas, es como tener una pagina en flash, pues en estas tampoco se puede apretar el boton de ATRAS.

Gracias tio, eres grandee!

mogoxd · #11 (**permalink**) 24/01/2008, 05:45

Ostia tiuu, una duda que me ha surgido. Voy a poder enviar variables php de unas paginas a otras haciendolo con el metodo de AJAX??

Por lo menos si en el boton flash, en el GetUrl pongo la movida: javascript:llamarasincrono('lapaginaquequieras.htm l', 'contenedor') funciona

Gracias por todo.

rastarot · #12 (**permalink**) 25/01/2008, 23:08

Muy buenas noches a todos, esta es la primera vez que participo en este foro, soy de Cali Colombia y tengo 22 años. Bueno la siguiente es para preguntar si algien sabe como hacer funcionar el codigo de AJAX para abrir páginas en elementos DIV con Internet explorer 7.0, ya que con Mozilla Firefox me muestra la pagina sin errores.

Agradecido a cualquier buena respuesta que me saque de este apuro.

mogoxd · #13 (**permalink**) 27/01/2008, 07:25

Hola Rastarot, solo decirte que el codigo ajax expuesto en esta pagina funciona perfectamente con IE7, por lo menos a mi me corre bien.

Saludos.

PD: Si tienes dudas de como aplicarlo pregunta, pero me parece que en el post esta claro.

pablinff · #14 (**permalink**) 28/01/2008, 17:41

Rastarot:
Bienvenido a este maravilloso foro y espero que tu estadía en este te sea muy provechosa!
Con respecto a tu duda:
Teóricamente el código expuesto aquí debería funcionar correctamente en IE7, te recomendaría que hagas un Debug de tu código para ver cual puede ser el problema, cualquier duda estoy a tu disposición. No dudes en consultar.

mogoxd:
Antes que nada muchas gracias por tus comentarios tan agradables :)
Con respecto a si es posible pasar variables php mediante AJAX, yo no lo he logrado y aunque no soy muy adepto a este tipo de tecnología he investigado un poco y hasta consulté con especialistas en el tema, en un seminario al cual asistí y de momento AJAX es una tecnología no muy madura y aunque promete mucho aún le falta crecer. Yendo al grano según especialistas, aún no se puede hacer eso pero la verdad es que ya hace un par de meses que ando alejado de esa tecnología y no me extrañaría que ya exista una solución. Intentaré investigar y si veo alguna solución este será el primer lugar en donde lo postee.
Saludos!

mogoxd · #15 (**permalink**) 08/02/2008, 13:27

Hola Pablinff. Ya me empezaron a surgir los primeros problemas. No se carga el flash contenido en el html. Dejo los links pa que deis vuestra opinion.

Aqui el index, donde al apretar galeria tendria que cargarse el swf.

http://mogoxd2.iespana.es/

Y aqui el enlace directo para que veais que funciona correctamente.

http://mogoxd2.iespana.es/galeria/galeria.php

Quiza modificando el archivo de ajax.....

GRacias a todos. Cordiales saludos

pablinff · #16 (**permalink**) 08/02/2008, 16:19

mmm... Sinceramente nunca probé cargando un .swf yo te diría que tal vez cuando renderices tu pelicula flash lo hagas con una version del reproductor no tan nueva... probá eso y contame

mogoxd · #17 (**permalink**) 08/02/2008, 20:14

bufffff, que mal lo veo...

como maximo me permite un flash 5 o 6. La cuestion es que la galeria es complejilla, com XML y demas. Me deja publicarla como minimo a 6, pues utiliza AS2, pero con menos de la version 7 no me tira el XML.

Alguna solucion amigo mio? Espero que saquemos algo en claro, que no me apetece tener que modificar toda la pagina....

Corsiales saludos y gracias.

mogoxd · #18 (**permalink**) 10/02/2008, 09:05

Mira, paso la galeria haber si alguien puede hacerla funcionar con flash 6.

http://www.megaupload.com/?d=PX19JJCI

Gracias.

[HH]KaoS · #19 (**permalink**) 10/02/2008, 09:23

Cita:

Iniciado por mogoxd

Ostia tiuu, una duda que me ha surgido. Voy a poder enviar variables php de unas paginas a otras haciendolo con el metodo de AJAX??

Por lo menos si en el boton flash, en el GetUrl pongo la movida: javascript:llamarasincrono('lapaginaquequieras.htm l', 'contenedor') funciona

Gracias por todo.

Mogoxd sí que puedes, puedes enviar variables en una petición AJAX tanto por el método GET como por el método POST, aunque lo lógico es que si envías uses el POST.

Por el tema de compatibilidad con navegadores yo siempre recomiendo usar algún framework Javascript, así te ahorras quebraderos de cabeza.

El único problema que yo le encuento ahora mismo a AJAX es que no permite en envío de ficheros por ese método, pero en cuanto q recuperar cualquier otro tipo de información no debería haber ningún problema. Si lo que quieres es cargar un flash lo lógico es que cargues el enlace al flash, no que recuperes el SWF.

Un saludo y espero haber ayudado.

mogoxd · #20 (**permalink**) 10/02/2008, 12:04

Con el flash el problema que tengo no es al abrirlo, sino en que funcione. Solo funciona como minimo con la version 6.

La movida que tiene es que no me abre el XML en esa version. Haber si me podeis ayudar a solucionarlo.

Cordiales saludos, gracias.

[HH]KaoS · #21 (**permalink**) 10/02/2008, 13:36

Entonces pregunta en el foro de Flash y Actionscript mejor,¿no?

Yo es que la verdad ahora mismo tengo Actionscript muy dejado y dudo que pueda ayudarte.
Pero suerte y ánimo!

pablinff · #22 (**permalink**) 20/02/2008, 22:53

magoxd:
La verdad es que ya a estas alturas con flash 7 no deberías de tener problema, yo pensaba que tal vez utilizabas una versión mas nueva, pero como dije no debería tener problemas.
[HH]KaoS:
Es interesante lo que dices que se pueden pasar variables, ahora mi pregunta es la siguiente:
Supongamos que doy la siguiente url: <a href="javascript:llamarasincrono('varios.php?msj=t rue', 'contenedor')">varios.php</a>

Des esta forma llamo asincrónicamente a varios.php, pero es posible que yo mediante un if pueda determinar si el div de id msj se muestre de acuerdo a lo que valga "msj" en mi querystring?
Para ser mas claro:

Código PHP:

  <?

if($_GET["msj"]){

echo "<div id=\"msj\" /> El mensaje... </div>";

}

?>

El resto de varios.php....

Es posible que yo utilizando el link expuesto mas arriba pueda acceder a el div msj de acuerdo a como haya asignado la variable msj?

Si es posible es interesante conocer la respuesta.
Desde ya muchas gracias por tu aporte.
Saludos!

[HH]KaoS · #23 (**permalink**) 21/02/2008, 03:36

Sí que se puede hacer eso. No es esa exactamente la sintaxis pero sería algo parecido sí.
Me explico un poco mejor.

Tu pones un link <a href="javascript:llamarasincrono('varios.php?msj=t rue', 'contenedor')">varios.php</a>

Esto lo que hace es que cuando hagas click en el enlaces varios.php va a llamar al script varios.php y le pasaría la variable msj con valor = True. (no es exactamente la sintaxis repito, pero se entiende que ese sería el funcionamiento).

Entonces se ejecuta el scripts con ese "estado" y debido a que msj=True las respuesta de varios.php será:

Código:

<div id="msj" /> El mensaje... </div> El resto de varios.php....

Que se devolverá a la página inicial donde se hizo click a varios.php, y una vez el resultado ha sido devuelto tendrás tu función que rescargará en el contenedor que será el id de un div el mensaje devuelto.

----
Otra forma de usarlo podría ser por ejemplo para un login.
Tu envías los datos: user//pass a un script para tratar de loguear al cliente.
Si los datos son correctos devuelves la cadena de texto "True", en caso contrario "False".
Luego cuando recibes la respuesta True//False simplemente haces un eval de la respuesta y la guardas en una variable y ya desde Javascript puedes manejar a tu antojo. Ya no es necesario imprimir lo que recibiste, ahorar puedes utilizarlo como protocolo para mandarte mensajes con el servidor de un modo un poco más complejo.

Venga un saludo!

pablinff · #24 (**permalink**) 21/02/2008, 14:16

Muy interesante tu comentario, lo probaré y si funciona tal y como dices la verdad es que cambiará rotundamente mi opinión respecto a esta tecnología.

Muy agradecido por tu aporte

Saludos!

[HH]KaoS · #25 (**permalink**) 21/02/2008, 16:23

Cita:

Iniciado por pablinff

Muy interesante tu comentario, lo probaré y si funciona tal y como dices la verdad es que cambiará rotundamente mi opinión respecto a esta tecnología.

Muy agradecido por tu aporte

Saludos!

No hay de qué. Si tienes algún problema con la práctica sólo dímelo y te echo una mano, en realidad es muy simple, lo único que cuesta en todo caso es controlar los conceptos.

Venga suerte!

mogoxd · #26 (**permalink**) 21/02/2008, 18:11

gracias a todos. El fallo del flash estaba en la llamada de este. Ahora funciona con cualquier version, solo hay que quitarle las etiquetas <noscript>.

Respecto a lo de las variables, si que funciona entre las instancias pequeñas, pero si paso una variable al index, no puedo recogerla desde las pagina que llamo con la funcion.

Cualquier duda preguntarme, que ya lo tengo muy machacado.

Cordiales saludos, y gracias de nuevo.

RoggerElfo · #27 (**permalink**) 13/03/2008, 10:05

funcionaria igual si quiero cargar una imagen dentro del div ... osea si funciona en IE7 pero en Mozilla, Safari, etc etc naaa

pablinff · #28 (**permalink**) 13/03/2008, 18:08

Debería funcionar correctamente, mientras lo que llames sea una página y dentro de esa página esté incluida la imagen. Ahora si lo que quieres es llamar directamente una imagen no te funcionará.

Saludos!

lolo_team · #29 (**permalink**) 21/10/2008, 01:55

Hola Gente gracias por el aporte, dando vueltas y viendo los cogidos que dejaron y después de romperme la cabeza todo el dia encontré la forma de hacerlo andar a mi gusto...

Paso a contarles seguro alguno le va a servir, arme un sistema para la publicación de txt y fotos en php y sql, con botonera el flash (hasta ahora no probe cargar los php desde flash pero vi arriba que es fácil con el viejo java jiji)

El tema es el siguiente use el viejo iframe algo que no me gusta usar pero bueno era lo que tenia a mano... pero o me encontre con el viejo dilema de que pasa con los buscadores.

Entonces recordé los div y bueno buscando en forosdelweb llegue a este post.
asi que agarre el js de pablinff y el cod php lo acomode... pero seguía sin andarme ya que tenia que pasar variables (index.php?idp=buscar&dato1=$dato1&dato2=$dato2) le di vueltas y vueltas y mas vueltas, lo que pasaba es que ponía las variables en el include del cod php se imaginan el error que me daba , si si me olvide que con los div no hace falta pasarle las variables al div sino a la misma pagina. osea el cod quedo precido al de pablinff con ceirtos cambios y listo cambie los $_POST por $_GET y listo salio andando...

Cualquier cosa manden mensaje por que no se cuando dare una vuelta por aca jiji

En definitiva el error fue de querer pasarle las variables al div (como en los iframe u a otra pagina) en ves de trabajarlas de forma normal como si fuese la misma pagina .....asi que me salve de usar ajax cosa que me debo aprender pero como se dice mas al verano jiji.

Des pues que lo termine les paso el php para que me cargue todo (index.php mas div)
y cod de muestra de como funciona.