Cargar div de una url a otra con jQuery
En este artículo vamos a ver como obtener un contenedor de una url para mostrarlo en otra. En el ejemplo en funcionamiento veremos como obtener el contenedor con id=»header» sin tener que volver a duplicar el código.
Esta idea puede resultar muy útil cuando estás creando una Web que va a disponer de una parte estática o corporativa (Joomla), un blog de noticias (WordPress) y una tienda de productos (Prestashop) por ejemplo, y queremos que tanto la cabecera como el pie de página sean iguales en los 3 gestores de contenido.
Una forma interesante y rápida de cargar contenedores o divs de una página a otra es utilizando la función load() de jQuery.
Para conseguir este efecto tan solo deberemos añadir en la página donde queremos cargar el cotenedor de otro sitio lo siguiente:
<script src="../jquery.js"></script>
<script>
$(document).ready(function() {
$('.header').load('URL #header');
});
</script>
Necesitarermos la librería jQuery y dentro del document ready llamamos a la función load con la URL de origen y el contenedor que queremos cargar. La clase «.header» será el contenedor de destino.
En el HTML deberá estar vacío:
<div class="header"></div>
Autor
¿Buscas trabajo de programador?
10 respuestas a “Cargar div de una url a otra con jQuery”
Deja una respuesta
109 artículos que te podrían interesar
Ver más sobre
Hola Jose. Muy útil la info.
Cuál sería la url de la librería jQuery?
Gracias
Hola,
https://jquery.com/
Saludos
Hola, tengo una duda, se puede mandar llamar el contenido de la página una vez llamado.
Ejemplo:
$(document).ready(function(){
$(«#boton-cargar»).click(function(event){
$(«#contenido»).toggle((1000), function(){
$(«#contenido»).load(‘pagina.html #contenidos’, function(){
$(this).toggle(1000);
$(«.enlace»).click(function(event){
$(«#contenido»).load(‘pagina2.html #contenidos’);
});
});
});
});
});
Lo mejor será que lo pruebes y veas tu mismo que sucede…
amigo, me funciono lo que indicas, ahora tengo un problema con la animacion query que usa mi menu, es el menu lo que estoy compartiendo en varias paginas internas, lo que pasa es que mi menu parece estatuica y ya no esta con su animacion.
amigo si deseo que mas de un div se duplique en las demas paginas secuandarias ?
Hola, a mi me pasa que me carga el div però milesimas de segundo despues vuelve a cargarlo y así indefinidamente.. sabes que podría ser?
Muchissimas grácias por la ayuda
No funciona el ejemplo en funcionamiento.
Quería saber si puedes cargar parte de paginas externas de tu dominio.
HOla buenas tardes,
El ejemplo en funcionamiento no funciona debido a que se perdió debido a un ataque y si que se puede coger parte de un dominio y ponerlo en otro tal como explico.
Saludos
gracias amigo me solucionaste un gran problema, saludos