Mostrar un .html dentro de una etiqueta DIV

[SirZoX]

La idea es suprimir de todas todas los frames en una web. Tengo un DIV con una serie de links, y otro link que hace las veces de "principal".

El caso es que quiero que al hacer click dentro de un link en el DIV "menu" quiero que se cargue en el DIV "principal" una pagina html.

He probado algunas cosas en javascript pero no he conseguido hacerlo funcionar todavia.

Espero que alguien pueda echarme un cable.

Gracias.

[oskarL]

Hasta donde yo se, eso solo se puede hacer con frames, o con iframes, que pa eso estan... Creo que cargar una pagina .htm en un div no se puede hacer... corregidme si me equivoco.

Si quieres suprimir los frames de una web, lamentablemente tienes que "reestructurar" todas las páginas. En tu caso, lo ideal es tener las partes separadas en archivos, por ejemplo, cabecera.htm y menu.htm, y luego utilizar includes en cada uno de los otros arhivos que ibas cargando en los frames.

[animaliens]

Respecto de la pregunta anterior, he visto que en el sitio:
www.clarin.com
que es el sitio de un diario de Argentina
puedes tildar/seleccionar las noticias que deseas leer: El Mundo (10) La Ciudad (1) Sociedad (13) Deportes (11) Tendencias (5) Entretenimientos (3)

y a medida que seleccionas o des/seleccionas rubros las noticias aparecen o desaparecen y las que estban abajo suben en la columna donde estan expuestas.

Estan utilizando iframes para que esto ocurra?
Esos iframes son dinamicos?

Es curiosidad porque estoy preparando algo parecido.

[oskarL]

animaliens, yo creo que se trata de divs ocultables...

[JavierB]

Hola a todos.

Visto un poco por encima, parece que lo que hacen en esa página es poner una clase a los div, dependiendo del tipo de noticia (El País, El Mundo,...)

<div class="ctx1478">

y cuando se pulsa el checkbox hace un bucle para mostrar/ocultar los div adecuados.

Saludos,

[animaliens]

y COMO ES ESO DE LOS DIVS OCULTABLES?
PUEDE HACERSE EN HTML?
jeje
no cazo una :P

[oskarL]

Se suele hacer con comportamientos de JavaScript.

A través de css (propiedad style de un elemento), se puede modificar la visibilidad de una capa con la propiedad "visibility", que puede adoptar los valores "visible" y "hidden".

Solo tienes que elegir el evento que quieras de JavaScript, y programar que la capa que quieras se oculte o se visualice.

Ej:

(JavaScript)

Código:

	function mostrar(){
		var capa=document.getElementById("capa");
		capa.style.visibility="visible";
	}


	function ocultar(){
		var capa=document.getElementById("capa");
		capa.style.visibility="hidden";
	}

(HTML)

Código HTML:

<div id="capa" onClick="ocultar()" onMouseOut="mostrar()">Contenido de la capa</div> 

[SirZoX]

esta bien lo de las funciones mostrar y ocultar.

Pero ahora llega el gran problema. Tengo alrededor de 100 paginas distintas que mostrar, y claro... un DIV por cada pagina... pues puedo morirme y que mi siguiente generacion complete el curro xD

Otra cosa q me ha resultado interesante al leer es el tema de hacer un bucle siempre para q encuentre la pagina que he solicitado y la saque por pantalla... lo que no acierto a hacerme un esquema de como seria y despues como pasarlo a codigo.

Como vereis.. estoy empezando un poquito con todo :S

[oskarL]

SirZoX, lo de los Divs ocultables era para lo que animaliens habia preguntado... y que por cierto ha desviado un poco la tematica del post, jeje. En realidad los divs ocultables y lo que preguntaste al principio no tiene mucho que ver...

[oskarL]

Por cierto, tienes una web en la que tienes 100 paginas para mostrar en frames!!!

Si es asi es posible que tengas razon, y que tengas que dejar este trabajo como legado a tus descendientes, jeje. Lamento decirte que es muy probable que tengas que cambiar el codigo de cada una de las paginas, aunque sea muy poco (metiendo includes, como te dije)

A ver si alguien de por aki se le ocurre algo para que no tengas que hacerlo

Suerte! jeje

[SirZoX]

Pensandolo bien... tengo casi 100 paginas con la version vieja de la web, que estaba todo dentro de una tabla un poco rara q me obligaron a hacer y tal. El tema es que con el modelo nuevo, tengo muchisimo mas espacio dentro de la misma pagina para poner toda la informacion que he de poner, por tanto seguramente las paginas se reduzcan a unas 50 aproximadamente. Quiza no sea tantisimo trabajo, y lo mas facil seria usar los frames o iframes, pero es que personalmente les tengo asco total porque siempre acaban sacando barras de scroll segun navegadores, o segun resoluciones, y el capullo de mi jefe es un pijotero de mucho cuidado y cuando le presento algo lo pasa por 5 navegadores y versiones distintas, lo pasa por 4 resoluciones diferentes y comprueba que le guste en todas, si no le gusta en alguna, pues que me busque la vida para solucionarlo, que el que sabe de webs soy yo no el (y tiene razon) pero es un poco pesado xd

[Algranoweb]

Hola Sirzox, mira creo que te entiendo, ocultar div sirve pero a la hora de la carga de una web se hace pesado, imaginate tiene que cargar TODA LA WEB eso es una locura; en cambio llamando (sea con un Iframe o page loader de phatfusion) a las respectivas paginas seria mas amigable, ya que cargarias la pagina principal y luego se irian mostrando las paginas que el usuario nesecite.
Ahora el problema con el phatfusion es que no lo puedo hacer andar pero en su web se ve genial la funcion ;)

[daPhyre]

En mi página hago eso que quieres de cargar páginas HTML en un DIV con un código de JavaScript. Dame unos minutos y te paso el código.

[daPhyre]

Primero: Crea los html a ser cargados removiendo la información extra al principio (las etiquetas <html>, <head> y su contenido, y <body>)

Segundo: En la página principal donde ponias los frames, sustituye este lugar por un div con un id, por ejemplo:

Código HTML:

<div id="main">
<noscript>JavaScript está desactivado, AJAX no podrá ser usado</noscript>
<script src="ajax.js" type="text/javascript"></script> 
</div> 

Donde ajax.js será tu código de JavaScript.

Tercero: El código JavaScript ("ajax.js"):

Código:

document.write("<p>Espere mientras carga la p&aacute;gina.</p>");

function loadurl(url,id){
	var pagecnx = createXMLHttpRequest();
	pagecnx.onreadystatechange=function(){
		if (pagecnx.readyState == 4 && (pagecnx.status==200 || window.location.href.indexOf("http")==-1))
		document.getElementById(id).innerHTML=pagecnx.responseText;
	}
	pagecnx.open('GET',url,true)
	pagecnx.send(null)
}

function loadurlkey(e,url,id){
	tecla = (document.all) ? e.keyCode : e.which;
	if (tecla==13)
		loadurl(url,id);
}

function createXMLHttpRequest(){
	var xmlHttp=null;
	if (window.ActiveXObject) 
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	else if (window.XMLHttpRequest) 
		xmlHttp = new XMLHttpRequest();
	return xmlHttp;
}

Cuarto: Para poderlo usar, cambia tus href a este modo:

Código HTML:

<a href="javascript:loadurl('pagina1.html','main')">página 1</a> 

Mandandole de parámetros el nombre de tu página, y el id del DIV donde lo vas a cargar. Además es posible que quieras que se cargue una de tus páginas en tu página principal cuando esta se abra. Para esto usa este código al abrir tu Body:

Código HTML:

<body onload="loadurl('pagina1.html','main')"> 

Espero esto sea lo que estabas buscando y te sirva.

Edito: Tuve un error en la línea para cargar la URL, como verán en el resto de los posts. Lo he corregido por si alguien en futura referencia llega a ver este código y desea usarlo. Si quieren ver el código en acción, les dejo este link donde lo pongo a prueba: http://mx.geocities.com/daphyreweb/web/tips/ajax/

Edición 2: He descubierto una forma de hacer uso de los links de forma más accesible. Para ello, utilizamos los href de esta forma:

Código HTML:

<a href="pagina1.html'" onclick="loadurl('info1.html','main'); return false" onkeypress="loadurlkey(e,info1.html','main')">página 1</a> 

Donde info1.html será la página a cargar, y pagina1.html será la página que se cargará en caso que JavaScript esté desactivado. ¡Suerte a todos!

Edición 3: Hemos llegado a encontrar una solución más accesible. Para saber más de esta, sigue este link: http://www.forosdelweb.com/f85/ajax-...4/#post2481660
¡Suerte!

[Mikmoro]

Igual es lo que estaba buscando, pero el último mensaje de SirZoX era del 16/05/06 .

Creo que Algranoweb no se dió cuenta y reavivó el hilo.

Mikel.

[daPhyre]

Y yo no me di cuenta tampoco ._.' (Debo aprender a ver las fechas ^^')

Bueno, con algo de suerte, servirá a alguien ahora =P

[Mikmoro]

Iniciado por daPhyre

Bueno, con algo de suerte, servirá a alguien ahora =P

Sí, eso puede que sí.

Mikel.

[ssclamp]

A mí me ha servido.

Muchas gracias daPhyre.

Lo probaré. ¿Servirá para todos los browsers?.

Gracias

[daPhyre]

Iniciado por ssclamp

A mí me ha servido.

Muchas gracias daPhyre.

Lo probaré. ¿Servirá para todos los browsers?.

Gracias

Pues hasta donde se, está diseñado para que sirva en la gran mayoría (Creo que muy pocas cosas pueden abarcar "todos" en absoluto). Según tengo entendido, trabaja para IE, FF y Opera. Yo lo he probado en los dos primero y en Safari, y no me ha dado problema alguno. Suerte

[ssclamp]

Hola daPhyre

Seguro que estoy haciendo algo mal, pero no me funciona ni offline ni online.

Este es el html

Código:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Prueba</title>
<script src="ajax.js" type="text/javascript"></script>
</head>

<body>

<p><a href="loadurl('pagina1.html', 'main')">Cargar página 1</a></p>
<p><a href="loadurl('pagina2.html', 'main')">Cargar página 2</a></p>



<div align="center">
	<div id="main" style="border:1px solid #C0C0C0; width: 500px; height: 400px">
		Espere mientras se carga el contenido. Si la página tarda e cargar, asegurate de tener JavaScript activado.
	</div>
</div>

</body>

</html>

Y este es el javascript:

Código:

function loadurl(url, id){
	var pagecnx = createXMLHttpRequest();
	pagecnx.onreadystatechange=function()
	{
		setpage(pagecnx, id)
	}
	pagecnx.open('GET', url, true)
	pagecnx.send(null)
}

function setpage(pagecnx, id){
	if (pagecnx.readyState == 4 && (pagecnx.status==200 || window.location.href.indexOf("http")==-1))
	document.getElementById(id).innerHTML=pagecnx.responseText;
}

function createXMLHttpRequest() {
	var xmlHttp=null;
	if (window.ActiveXObject) 
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	else 
		if (window.XMLHttpRequest) 
			xmlHttp = new XMLHttpRequest();
	return xmlHttp;
}

También tengo dos html llamados pagina1.html y pagina2.html que son los que se deberían cargar en el div, pero nada de nada... por favor podrías decirme que es lo que está mal.

Gracias

[Mikmoro]

Mira, este es el que yo uso.

Archivo ajax.js

var peticion = false;
if (window.XMLHttpRequest) {
peticion = new XMLHttpRequest();
} else if (window.ActiveXObject) {
peticion = new ActiveXObject("Microsoft.XMLHTTP");
}

function cargarExterno(datos,divID) {
if(peticion) {
var obj = document.getElementById(divID);
peticion.open("GET", datos);
peticion.onreadystatechange = function() {
if (peticion.readyState == 4) {
obj.innerHTML = peticion.responseText;
}
}
peticion.send(null);
}
}

Ahora lo cargo desde la cabecera del html con:

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

Y ahora en el html los enlaces van por ejemplo así:

<ul id="menu">
<li><a href="javascript:cargarExterno('pagina1.html','con tenido');">Cargar
el html 1</a></li>
<li><a href="javascript:cargarExterno('pagina2.html','con tenido');">Cargar
el html 2</a></li>
</ul>
<br>

<div id="contenido"></div>

A ver si te va.

Mikel.

[ssclamp]

Hola Mikel,

Genial, acabo de probarlo en máquina local y funciona perfectamente. Ahora lo subiré a la red y seguro que sigue funcionando.

Muchas gracias. Es de gran utilidad.

Saludos

[daPhyre]

Encontré el error! No estaba en el JavaScript, estaba en el link que lo llama XD!!!!

Ahora mismo lo corrijo =P'

Texto original:

Código HTML:

<a href="loadurl('pagina1.html', 'main')">página 1</a> 

Texto corregido:

Código HTML:

<a href="javascript:loadurl('pagina1.html', 'main')">página 1</a> 

Pequeño horrible error caotico x_x'

[atrapel]

Probado en: Firefox 14, Internet Explorer 8, Maxthon 2, Opera 9 y Safari 3.
Funciona perfectamente. Muchas gracias daPhyre, ayer tuve este problema y hoy está resuelto; que bien funcionan las cosas cuando estan bien hechas.

[Jamati]

Una pregunta para los que participaron en este tema:

¿cual es la ventaja de usar Ajax contra la idea de usar unos server include?

Pregunto, porque Ajax con esta funcion me permite en una misma página cargar otra pagina, pero mi pregunta se basa principalmente en lo siguiente:

si yo tengo una web, la cual tiene 200 paginas, y en absolutamente todas usa la misma cabecera. Entonces me conviene usar Ajax para hacer esto y tener siempre la misma cabecera?... o aquí sí me conviene usar los server include ??

[pateketrueke]

ajax... segun yo, deberia estar pensado solo para pekeñas porciones de informacion y NO esta pensado para cargar pagina completas.... entonces, del lado del servidor... es mejor los includes cuando de grandes porciones se trata.... en pequeñas cantidades, ahi si conviene el metodo Ajax ... eso, veo yo...

[avalencia]

Una pregunta para daPhyre, yo hago uso tal como tu lo haces para cargar una pagina en un DIV, mi duda es: ¿Como resuelves el problema si quieres regresar a la pagina anterior? el nevegador me regresa a la pagina inicial, mas la anterior se queda en el limbo, jeje, te agradezco la ayuda, saludos..

[daPhyre]

Iniciado por avalencia

Una pregunta para daPhyre, yo hago uso tal como tu lo haces para cargar una pagina en un DIV, mi duda es: ¿Como resuelves el problema si quieres regresar a la pagina anterior? el nevegador me regresa a la pagina inicial, mas la anterior se queda en el limbo, jeje, te agradezco la ayuda, saludos..

Bueno, este es uno de los puntos que más resaltan como "desventajas" de AJAX. Dado que todo se carga dentro de la misma página, nada es registrado en el historial, y por tanto, no se puede usar el botón de atrás. Supongo que la solución más optima es usar un menú en la página con todos los links en un lugar visible para que con ellos se desplazen, que es lo que siempre veo en páginas que usan esta implementación. Por supuesto, si alguien tiene otra solución, sería muy buena aportarla. Quizá se pueda hacer algo con programación =P

Suerte!

[EventoFiebre]

bueno aprendi un poco amigo usa tab javascript y resuelves con eso

[Mikmoro]

Eso parece estar resuelto hace tiempo. Creo recordar que ví una solución en este mismo foro en la parte de ajax pero no sé dónde. No obstante, aquí hay un enlace donde habla un poco de eso.

http://www.ajaxman.net/246/boton-atr...jqueryhistory/

Mikel.