¿Quieres registrarte?
Estás en: Cristalab > Tips > Cargar HTML externo con jQuery

Cargar HTML externo con jQuery

Por: ryuz
13 de Julio del 2007
290 de clabLevel
Otros artículos de ryuz
58,289 visitas
javascript jquery

Todos/as hemos leído el Tutorial de AJAX. Siempre tuve ganas de poder usar el ejemplo en un proyecto, pero nunca lo he intentado usar por ser intrusivo. Pero el otro día leyendo la documentación de jQuery me encontré con una cosa.

En este tip os voy a mostrar qué fácil es cargar documentos externos HTML con jQuery de forma no intrusiva.

Empezaremos creando una página HTML con un menú de navegación. Una lista normal a la que pondremos como identificador: "nav"

Código :

<ul id="nav">
   <li><a href="uno.htm">Enlace Uno</a></li>
   <li><a href="dos.htm">Enlace Dos</a></li>
   <li><a href="link.htm">Otro link</a></li>
   <li><a href="1337.htm">1337</a></li>
   <li><a href="creacionismo.htm">iDIotas</a></li>
</ul>

Y un contenedor donde cargaremos el HTML externo en este caso un div con id show:

Código :

<div id="show"></div>

Pero este código HTML es suficiente para que funcione, hace falta jQuery. Lo primero que hacemos es bajarnos la última versión de aquí (comprimido) y lo colocamos en nuestra página entre las etiquetas head así:

Código :

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

Falta colocar el script que hará funcione, entre etiquetas <script> que es este:

Código :

<script type="text/javascript">
$(document).ready(function(){
   $("#nav a").each(function(){
      var href = $(this).attr("href");
      $(this).attr({ href: "#"});
      $(this).click(function(){
         $("#show").load(href);
      });
   });
});
</script>

La "magia" del código está en $("#show").load(href);. Funciona parecido al include() de PHP. Primero seleccionamos el lugar donde se cargará el contenido y luego el contenido a cargar. (Aquí la documentación de jQuery). En nuestro caso, al hacer click en los elementos a que estén incluidos en #nav, #show se cargará las páginas a las que enlazan éstas.

Aquí el ejemplo funcionando.

Enviar a twitter Enviar a facebook


También te interesa


Etiquetas javascript jquery

Comentarios | Enviar un comentario
He actualizado el código y ahora se muestra una animación muy cool.

Código :

$(document).ready(function(){
   $("#nav a").each(function(){
      var href = $(this).attr("href");
      $(this).click(function(){         
         $("#show").hide().load(href).fadeIn("slow"); //Le damos efecto
         $(this).attr({ href: "#"});
      });
   });
});

Por: ryuz
Esta es la manera "fácil". La llamada por medio de $.ajax, permite muchas opciones, como llamado de errores, metodos, etc.

Buen tip ;)
Por: Lunatic Lycanthrop
Buen Tip, me gusto excepto por un detalle: ¿Como linkeas el js directamente a la web de jquery? XD... sería mejor bajar el .js y ponerlo en un server propio... por el bien de la web de jquery y la tuya.
Por lo demás, muy buen tip para partir en lo "oculto" de jQuery.
Por: RattaMono
pero funciona colocando el link de la web de jquery?..creo q voa probar xP yo tb pensé lo mismo que RattaMono..

Buen Tip!..gracias :D
Por: jst!_blog
No puedo ver el ejemplo, ni entrar a la página principal...
Por: El Mooorsa_blog
Es lo que buscaba hace mxs horas, sos genial

Chile
Por: Alfonso_blog
Que sucede con el history?
Por: Israel reyes_blog
Excelente tip, probando....
Por: flashreloco
wenas quisiera hacer lo mismo pero mostrando un archivo php alguna ayudita? xD
Por: J0h
me encanta estos efectos de jquery

muy buen tip me lo guardo gracias
Por: malder

J0h :

wenas quisiera hacer lo mismo pero mostrando un archivo php alguna ayudita? xD


Simplemente coloca la dirección de tu php en el link:

Código :

<a href="mipagina.php">PHP</a>

Por: The Fricky!
Hola todos, este es un truco muy util, pero como se puede hacer si creamos los botones en un flash????


Muchas gracias ;-)
Por: mixtacho
hola buen tutorial

pero quisiera cargar los archivos html dinamicamente en un div debajo del menu es decir al hacer clik en el menu que se cargue en un mismo div

Gracias
Por: Mike_blog
primero que todo, muchas gracias por este mini tuto
lo otro
no me funciona..xD
Por: gonzalo_blog
y si quiero que se cargue directamente al entrar en la pagina??????
Por: jaime_blog
Gracias por el script. Era lo que buscaba.

Mike_blog: para cargar en el mismo div simplemente cambia el #show del script por #nav.

jaime_blog: para que se cargue directamente al entrar a la pagina seria asi:

$(document).ready(function(){
$("#show").load('pagina.html');
});

Claro que esto deshabilita el que tome dinamicamente el href del link y lo cargue en el div.

Para ambos casos deberan usar en los links algo asi como:

href="#"
onclick="$('#show').load('pagina.html');
Por: Vidsoe.com_blog
exelente ... pero como hacer par que funcione el back de int explorer por ejemplo ?
Por: aldo_blog
Saludos a todos:
Tengo un archivo php donde se nuestra los datos de una base de datos en una tabla.
La tabla tiene efetos jquery("cebrada").
Cuando cargo este archivo php con load o $.ajax estos efectos se pierden.
Que error cometo?
Me pueden ayudar
Geacias
Por: ladeld_blog
como podria hacer para desarrollar una función donde solo le pase los parametros como el div ha cargar,la pagina ha cargar y el nombre del control y no necesariamente amarrarlo a que la eqtiqueta "a" este dentro de un DIV
Por: Rob_blog
hay otra forma de hacer sin poner el: $(this).attr({ href: "#"}); pq le paso parametros en ASP, y en firefox funciona perfectamente pero en explorer el link que ya he clickado cambia el nombre del enlace a # y por tanto no pasa el parametro inc_web.asp?id=5
Por: PoZu_blog

ryuz :

Código :

$("#nav a").each(function(){
    var href = $(this).attr("href");
    $(this).attr({ href: "#"});
    $(this).click(function(){
        $("#show").load(href);
    });
});


Esta es una muy mala técnica de evitar que la página sigue el evento y redireccione a la siguiente página.

Para esto lo que uno debe hacer es regresar un boolean al evento para asi detenerlo por completo con un return.

Código :

$("#nav a").each(function(){
    var link = $(this);
    var href = link.attr("href");
    link.click(function(){
        $("#show").load(href);
        return false;
    });
});

Por: NEO_JP
Aquí está la versión con los arreglos de NEO_JP.
http://www.ryuz.es/jqe/experiment.html
Por: ryuz
Excelente muchas gracias ryuz
Por: flashreloco
como puedo abrir una web nueva en uno de estos links??
Por: dvd-blog
quiero cargar un index2.htm desde index1.htm , maomeno asi tengo mi web programada:

<html>
<head>
.
.
<!-- jQuery-->
<script type="text/javascript" src="script/jquery-latest.pack.js"></script>

<!-- CSS-->
....

<!-- Funcion carga automatica de index2.htm -->
<script type="text/javascript">
$(document).ready(function(){
$("#cuerpo").load("/index2.htm");
});
</script>
</head>
.
.
.
pero no me carga el contenido del index1 :/

alguien me podria ayudar? pliss
Por: hola, soy new , alguien m
Hola, necesito ayuda urgente, estoy haciendo mi sitio con transiciones y llamadas via jquery y en la pagina de noticias quiero poder cargar dentro del

<div id="contenido">noticias.php</div>

como puedo hacer para poder cargar una pagina php dentro de mi pagina html?

No quiero esto:

J0h :
wenas quisiera hacer lo mismo pero mostrando un archivo php alguna ayudita? Riendo


Simplemente coloca la dirección de tu php en el link:

Código :

<a href="mipagina.php">PHP</a>
Por: Felipe Millan Assler-blog
Muy bueno la verdad es una gran herramienta el JQuery, pero quisiera saber si alguien podria mostrarme como hacer esto pero con un menu Flash y que carge una pagina html en un Div en la misma pagina, se que con una funcion javascript, se puede, pero para darle este efecto de aparicion lenta y con JQuery es algo mejor.

Pero tampoco que me muestre la pag. html en un frame o iframe, sino en un DIV, ya que este se adapta al tamaño que tenga tu pag. html y no como los frame o iframe que te muestran sus barras.

Ok spero me hayan entendido y espero que muchos de los usuarios que dominan flash me puedan dar una solucion.

Gracias de Antemano.
Por: AyllonDark-blog
Ola diganme muy bueno este ejemplo, pero como podria hacer para que al cargar una pagina primero me carge la imagen gif de "loading.gif" y luego me carge el verdadero contenido de esa pagina, con el efecto de aparicion transparente del texto o documento.
ya que con botones en flash la veo mas dificil.
Gracias de Antemano.
Por: AyllonDark
Exelente el codigo NEO_JP pero como seria si queremos que al ingresar cargue el primer link.

Gracias
Por: Christian-blog
La verdad haces más sencilla la vida con estos tips :).

Tengo una duda, y si quisiera que solo carge una web sin dar click a algún boton, como cambiaría la función??
Por: BlackMage
Gracias!! justo lo que estaba buscando. Buen post!!!
Por: Andrea-blog
Muy buen Tips, pero como podria hacer si tengo dos DIVS y quiero que al hacer click en el LINK 1 me carge en la DIV1 x ejemplo y si clikeo en el LINK 2 el contenido me lo carge en la DIV2 y no la 1?
Muchas Gracias
Por: BEZOWIE-blog
Beni dibertite entra a http://s5.ar.gladiatus.com/game/c.php?uid=69219
Por: Maximoel88-blog
hola si pongo esto:
<a href="mipagina.php">PHP</a> lo que me habre es la ventana para guardar ese archivo, mas no la pagina, le explico tengo el index.php y las otras pagina como _menuVertica.php tambien cabecera.php ese es el problema... como hago para del menu enlazarlas con <a href=......
Por: ilen-blog
ps utilice tu ejemplo y me resulto excelente :D pero ahora quiero que los links que me aparecen en el div de contenido no me aparescan en una ventana nueva si no en el mismo div.

eso se puede con ese mismo script?
Por: covra-blog
podrias dejar los archivos en un .zip para que los destripe... porque no me sale.
Por: miguel-blog
Muchas gracias, era lo que estaba buscando. Estoy simplificando todo lo que puede ser simplificado, que diría John Maeda, y este truco ayuda mucho.

Saludos!
Por: Adrián-blog
La verdad que esta muy bueno el tutorial logre que funcione todo pero tengo dos problemas el primero es que no se como cambiar el lugar donde aparece la imagen de precarga loading.gif es decir quiero poder ubicar en la parte que yo quiera la imagen cuando carga. tambien necesito lograr que funcionen los botones adelante y atraz del Ie firefox etc.. si me ayudan con esto se los voy a agradecer muchisimo
Saludos!
Por: Marco-blog
Por si a alguien le sirve arregle el prolema de posicionar el loading.gif donde yo queria cree un div: <div id="loading"></div> le di el estilo asi:
#loading {
position:absolute;
height: 15px;
width: 155px;
left: 358px;
top: 21px;
}
de esa manera puedo elegir donde quiero que apareza la imagen de carga
sigo tratando de lograr que funcionen los botones de atras y adelante prove con ajaxhistoy algo asi y no me funciona si alguien tiene una solucion para eso se lo voy a agradecer mucho saludos!
Por: Marco-blog
Hola todos, este es un truco muy util, pero como se puede hacer si creamos los botones en un flash????
Por favor me es muy urgente y no lo doy encontrado!!!
Por: Bea-blog
Muy bueno la verdad es una gran herramienta el JQuery, pero quisiera saber si alguien podria mostrarme como hacer esto pero con un menu Flash y que carge una pagina html en un Div en la misma pagina, se que con una funcion javascript, se puede, pero para darle este efecto de aparicion lenta y con JQuery es algo mejor.

Pero tampoco que me muestre la pag. html en un frame o iframe, sino en un DIV, ya que este se adapta al tamaño que tenga tu pag. html y no como los frame o iframe que te muestran sus barras.

Ok spero me hayan entendido y espero que muchos de los usuarios que dominan flash me puedan dar una solucion.

Gracias de Antemano.

Este comentario está más arriba y me identifico con él. Por favor si habéis resuelto el problema o alguién sabe como hacerlo por favor ayudadme. Llevo dias buscando y no encuentro nada.

Gracias
Por: Beatriz-blog
alguien podria decirme como le hago para que los links del div me lleven a la otra pagina pero que aparesca en el mismo div???

supongo que es algo parecido a esto, pero no ma sale
<a href="uno.htm" onclick="return loadurl(this.href,'show');">Enlace Uno</a>
Por: carlospalomito-blog
ya tengo la respuesta a mi pregunta anterior

lo unico que tiene que hacer uno es que en las paginas que va a manejar uno dentro del div, el texto tiene que estar encerrado dentro de un div con id igual al del menu de la pagina principal, asi cualquier link es tomado encuenta y se tiene que volver a declarar el scrip en el head

men es igual al div donde tengo el menu

desc es igual al div donde va a aparecer la respuesta del link

<script type="text/javascript">
$(document).ready(function(){
 $("#men a").each(function(){
 var href = $(this).attr("href");
 $(this).click(function(){  
 $("#desc").hide().load(href).fadeIn("slow"); //Le damos efecto
 $(this).attr({ href: "#"});
 });
 });
});
</script>

par el asunto de los acentos y "ñ"

coloca en el head esto

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Por: carlospalomito-blog
Hola, miren el problema que tengo es el siguente. Actualmente estoy creando una página web xhtml/css con jquery, pero lo que quiero hacer es cargar los demás hipervínculos dentro de un DIV, en este caso el DIV #cuerpo. El DIV #cuerpo es donde quiero que cargue cada cada documento html sin que vuelva a refrescar la página completa, solo que cambie todo lo que está en el DIV cuerpo.
Espero que me puedan ayudar amigos, estoy muy complicado.

Gracias de antemano
Por: f(x)-blog
Muy buen post, me ha ayudado de mucho.

Saludos.
Por: DrMartin
Hola alguien podria ayudarme, ante nada perdonen mi ortografia, jajaja se lo debo a word, lo siguiente, trato de usar tu codigo para que me cargue la pagina autmaticamente cuando entro ejemplo si entro a index2.php quiero que dentro de esa div se me cargue el contenido de la pagina http://www.synapse.com.ve/

asi me quedo el codigo y no me funca

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#show").load("http://www.synapse.com.ve/index.php");
});
</script>

</head>

<body>
<div id="show"></div>
</body>
</html>
Por: Jhonatan-blog
Hola! como podria cada vez cargar desde una botonera un div distinto

muchas gracias
Por: Maria-blog
Hola! esta muy bien el codigo pero tengo un problema, al cargar en un div un html que contiene un widget de twitter, al cargarse este, se redirecciona a algun sitio q ni se abre y claro me fastidia todo el html, si alguien me pudiera ayudar a solucionar esto...
Por: seudo-blog
Muy bueno, me sirvió mucho.
Muchas gracias!
Por: Franco-blog
Hola, soy nuevo en estas cosas y me gustaría aprender hacer webs porque me parece muy interesante, de momento sólo estoy haciendo una para mí.
El caso es que he usado este ejemplo de menú y funciona perfectamente, pero me gustaría saber si se puede hacer que al cargar la página se cargue "automáticamente" una de las opciones del menú que yo le diga, para que no salga en blanco al principio.
¿Cómo puedo hacerlo?
Muchas gracias por vuestra ayuda.
Por: manolito-blog
A mí me ocurre lo mismo que a manolito-blog, ¿se puede cargar inicialmente alguna o hay que buscar otra solución?
Por: Mariola-blog
Estoy cargando páginas html en una Div. No hay problema en ello. El problema es que si la página que cargo contiene una galería de imágenes que han de verse al estilo lightbox no funciona.

¿Alguien sabe solucionarlo?
Por: Carlos-blog
Carlos, a mí me ocurra también, no sólo con las galerías de imágenes, también con otras cosas, enlaces que muestran alguna foto, sitios de noticias, videos, etc. no los carga.
O sea, el truco funciona perfectamente y carga la página html en el div que se indique, pero no funcionan muchas cosas de esa página html cargada.
Por: manolito-blog
Yo ya he avanzado un poco, puedo cargar dentro de una div una página html con ligthbox dentro. Se me muestra y funciona en todos lo navegadores menos en Safari para Mac y esto es fundamental, ya que es el navegador por excelencia de Mac.

Ya te digo, me funciona perfectamente en el resto de los navegadores, pero no en Safari de Mac. Queda chulisimo cargar en una div una página html que contiene un ligthbox, me da rabia que no funcione en Safari de Mac.

En el safari de Mac reacciona pero carga la imagen eliminando toda la web y de forma rara...

Daremos con la solución?
Por: Carlos-blog
¿Y cómo lo has hecho, Carlos?
Por: manolito-blog
EL tutorial esta exelente, es justo lo que necesitaba, pero el enlace al ejemplo está roto... por favor corregirlo...
Por: Anonimo-blog
hola... estoy usando un método parecido dentro de una página php.


$(".accion").click(function(event) {
event.preventDefault();
alink = $(this).attr('href');
$("#resultados").load(alink + ' #resultados');
});

utilizo como enlace el título de cada columna para actualizar mi tabla, pero solo funciona una vez y luego se me recarga la página por completo. es como si no reconociera las etiquetas dentro del DIV 'resultado'... alguna sugerencia?
Por: cesar-blog
Me funciona de maravilla pero tengo el mismo problema con las galerías Ligthbox, podrían darme una ayudadita?
Por: Miguel-blog
Ups todo estaba bien hasta que linkie mas de una pagina, ahora solo funciona en Safari y Chrome, y en firefox e IE nada, se me cargan en otra, y ya cheque todo :s alguien sabe por que pasa eso?
Por: Miguel-blog
Por cierto lo del ligthbox no pude echarlo andar ahora opte por hacerlo a la antiguita
Por: Miguel-blog
Deja un comentario
IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.