AJAX - Cargar contenido de varias paginas sin que recargue toda la página

Pos: 20

Val: 10

Cargar contenido de varias paginas sin que recargue toda la página

Publicado por Hugo (5 intervenciones) el 04/12/2018 10:22:29

Buenos días, a ver si alguien me puede ayudar porque no se muy bien como hacerlo.
Estoy haciendo en Blogger una nueva web de una radio para un amigo, a partir de una plantilla, pero me gustaría que en un apartado que sería donde escuchar la radio, poner varias páginas en un menú, seria En Directo, Programación y A la Carta, y que se cargara el contenido de esas páginas sin necesidad de volver a cargar el resto de la web, por ejemplo para evitar que se cortara la emisión del player que vamos a poner.
Espero que sea el sitio adecuado para poner esto y que alguien me pueda ayudar.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 3

Val: 72

Cargar contenido de varias paginas sin que recargue toda la página

Publicado por abzer0x (17 intervenciones) el 04/12/2018 22:13:45

Hola, Hugo te dejo un pequeño ejemplo el cual puedes adaptarlo a tus necesidades.

index.html

<!DOCTYPE html>

<html>

<head>

	<title>Parcel Sandbox</title>

	<meta charset="UTF-8" />

</head>

<body>

	<ul id="menu">

		<li><a href="#" data-url="endirecto.html">En Directo</a></li>

		<li><a href="#" data-url="programacion.html">Programción</a></li>

		<li><a href="#" data-url="alacarta.html">A la carta</a></li>

	</ul>

	<div id="container">

		<!-- Aquí ira el contenido a cargar por AJAX -->

	</div>

	<script>

		document.addEventListener("DOMContentLoaded", (e) => {

			const menu = document.getElementById("menu");

			menu.addEventListener("click", event => {

				const target = event.target;

				if (target.dataset) {

					// realizó la petición

					fetch(target.dataset.url)

					.then(response => response.text())

					.then(html => {

						document.getElementById("container").innerHTML = html;

})

					.catch(error => {

						console.log(error)

})

})

});

	</script>

</body>

</html>

programacion.html

<!DOCTYPE html>

<html>

<head>

	<title>Programación</title>

	<meta charset="UTF-8" />

</head>

<body>

	<h1>Programación</h1>

</body>

</html>

endirecto.html

<!DOCTYPE html>

<html>

<head>

	<title>En directo</title>

	<meta charset="UTF-8" />

</head>

<body>

	<h1>En directo</h1>

</body>

</html>

alacarta.html

<!DOCTYPE html>

<html>

<head>

	<title>A la carta</title>

	<meta charset="UTF-8" />

</head>

<body>

	<h1>A la carta</h1>

</body>

</html>

Puedes probarlo aquí.

Nos comentas si es lo que buscabas.

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 20

Val: 10

Cargar contenido de varias paginas sin que recargue toda la página

Publicado por Hugo (5 intervenciones) el 05/12/2018 00:12:18

Muchas gracias, mañana lo pruebo y te digo

Valora esta respuesta

Comentar

Pos: 20

Val: 10

Cargar contenido de varias paginas sin que recargue toda la página

Publicado por Hugo (5 intervenciones) el 05/12/2018 20:35:13

Me ha funcionado, pero no, hay algunos fallos que no se si me podrias ayudar a pulir

Valora esta respuesta

Comentar

Pos: 1

Val: 90

Cargar contenido de varias paginas sin que recargue toda la página

Publicado por xve (222 intervenciones) el 06/12/2018 11:17:39

A que fallos te refieres Hugo?

Valora esta respuesta

Comentar

Pos: 20

Val: 10

Cargar contenido de varias paginas sin que recargue toda la página

Publicado por Hugo (5 intervenciones) el 06/12/2018 11:31:55

Escríbeme si quieres un correo y te cuento un poco más y te pongo como admin del blog de pruebas que tengo para que me ayudes si no te importa.
Mil gracias!!!

Valora esta respuesta

Comentar

Pos: 20

Val: 10

Cargar contenido de varias paginas sin que recargue toda la página

Publicado por Hugo (5 intervenciones) el 16/12/2018 01:27:01

Tras probar la respuesta que me dais, surge un problema, y es que me sale el footer de la página que sale insertada.
¿Como podría evitar que saliera ese footer?

Valora esta respuesta

Comentar

Reproductor web que no se cierra al cambiar a otra página.

Como pasar el valor de un ID a una variable PHP