Código de JQuery - Cargar una pagina externa en un div como un include

Imágen de perfil

Cargar una pagina externa en un div como un includegráfica de visualizaciones


JQuery

estrellaestrellaestrellaestrellaestrella(3)
Publicado el 02 de Abril del 2013 por Xavi
31.919 visualizaciones desde el 02 de Abril del 2013. Una media de 168 por semana
Código que muestra como cargar una pagina externa a modo de include() con jquery.

Versión 1
estrellaestrellaestrellaestrellaestrella(3)

Publicado el 02 de Abril del 2013gráfica de visualizaciones de la versión: Versión 1
31.920 visualizaciones desde el 02 de Abril del 2013. Una media de 168 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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 (3)

acaser
20 de Agosto del 2013
estrellaestrellaestrellaestrellaestrella
Hola, yo estaba en el mismo problema, con el ejemplo expuesto lo he medio solucionado, me explico:
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
Responder
Damian
01 de Diciembre del 2014
estrellaestrellaestrellaestrellaestrella
Hola, una consulta, como puedo crear un hipervinculo donde la refernecia del href="" sea el contenido del div. La idea es tener una conjunto de páginas que varias tienen hipervínculos a una página la cual puede actualizarse y cambiar su dirección completa. Por ende quiero actualizar el link en un txt y que me actualice todos los enlaces.

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!
Responder
webvolucion
12 de Diciembre del 2014
estrellaestrellaestrellaestrellaestrella
Hola yo he hecho algo parecido en mi web, pero tengo un problema, al cargar la pagina me aprece un error
(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">

&#169; 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>
-->
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2342