Cargar una pagina externa en un div como un include
JQuery
Publicado el 2 de Abril del 2013 por Xavi (548 códigos)
48.366 visualizaciones desde el 2 de Abril del 2013
Código que muestra como cargar una pagina externa a modo de include() con jquery.
<!DOCTYPE html>
<html>
<head>
<!--http://www.lawebdelprogramador.com/-->
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
// Indica el nombre del archivo a cargar
$("#incluirPagina").load("pagina.html");
});
</script>
</head>
<body>
<div id="incluirPagina"></div>
</body>
</html>
Comentarios sobre la versión: Versión 1 (6)
con el ejemplo he conseguido evitar corregir pagina por pagina , en algún cambio que pueda hacer al menú, hasta ahí correcto, el problema me viene cuando quiero acceder a un archivo que este en una subcarpeta, y que también debería verse el mismo menú, y el menú no sale, He probado a cambiar en el archivo de la subcarpeta la llamada del menú
$(function(){
// menu.html
$("#incluirPagina").load("menu.html"); });
</script>
</head>
<body>
<div id="incluirPagina"></div>
por este otro por el motivo de que esta en otro nivel
$(function(){
// ../menu.html
$("#incluirPagina").load("../menu.html"); });
</script>
</head>
<body>
<div id="incluirPagina"></div>
es decir, le añadí ../ por delante de menú pero no me sale tampoco
He probado a poner el primer ejemplo en la subcarpeta y tampoco
Podríais decirme donde esta la solución ¿
Gracias
Con este código logré mostrar la dirección en mis páginas y actualizarlas, pero no logro que funcione como un enlace.
Desde ya muchas gracias!
(Warning: include() [function.include]: Failed opening '/nens3.html' for inclusion (include_path='.:/opt/php-5.3/pear') in /home/u995339790/public_html/WEB/CAT/nens.php on line 128).
<!--
<html>
<head>
<?php
$recibe_pagina=$_GET['pagina'];
?>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>PRUEBA HELLO</title>
<link rel="stylesheet" type="text/css" href="http://pruebashellointerschool.esy.es/WEB/CSS/nens.css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Ubuntu|PT+Serif|Titillium+Web|Dosis|Bree+Serif|Ubuntu+Condensed|Alegreya' rel='stylesheet' type='text/css'>
<style>
</style>
</head>
<body>
<img class="fondo" src="http://pruebashellointerschool.esy.es/PRUEBA1/nens/web.jpg" />
<!--CABECERA-->
<div id="cabecera">
<div id="logo">
</div>
<div id="titulo" >
<h1 class="titulo">HELLO </h1>
<h2 class="titulo">INTERNATIONAL SCHOOL<h2>
</div>
<div id="idiomas" style="background:red; position:absolute; top: 0%; left:90%; width:10%; height:41%; opacity:0.8;line-height:90%;" >
<center>
<br/><br/><br/><br/>
<a href=#><img width="32px" src="http://www.santaanalloret.com/boton%20bandera%20catalana.png"/> </a><br/>
<br/>
<a href="#"><img width="32px" src="http://www.foroeurosongcontest.es/eurosong/img/flags/es.png"/> </a><br/>
<br/>
<a href="#"><img width="32px" src="http://madrid-berlin-idiomas.com/wp-content/uploads/2013/03/bandera-britanica-redonda.png"/> </a><br/>
</center>
</div>
</div>
<!-- FIN CABECERA-->
<!-- MENU PPAL -->
<div id="enlaces-lateral-niños">
<a style="color: red; background: navy; padding:4px; text-decoration:none; font-family:ubuntu; width:100px;"
href="#">HOME</a><br/>
<a style="width:200%;color: navy; background: red; padding:4px; text-decoration:none; font-family:ubuntu;" href="#">NOTICIES</a><br/>
<a style="width:200%; color: red; background: navy; padding:4px; text-decoration:none; font-family:ubuntu;" href="#">QUI SOM?</a>
</div>
<!-- FIN MENU PPAL -->
<!-- FOOTER -->
<div id="footer">
<p id="copy">
© Copyright 2014. <br/>
<a class="copy" href="index.html">HELLO INTERNATIONAL SCHOOL</a>
</p>
<p id="design">
WEBVOLUCION ESPAÑA<br/>
Disenyador:Christian Gonzalez<br/>
<a style="color:black; text-decoration:none;"
href="http://www.webvolucion.tk">
www.webvolucion.tk</a>
</p>
</div>
<!-- FOOTER -->
<div id="contenido">
<?php
switch ($recibe_pagina){
case "boton1":
include ("/nens1.html");
break;
case "boton2":
include ("/nens2.html");
break;
default:
include ("/nens3.html");
}
?>
</div>
<div id="navegacion">
<a href="nens.php?pagina=boton1" class="enlace1">
HORARIS
I CURSOS
</a>
<a href="nens.php?pagina=boton2" class="enlace2">
ACTIVITATS
</a>
</div>
</body>
</html>
-->