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

Imágen de perfil
Val: 382
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

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


JQuery

Publicado el 2 de Abril del 2013 por Xavi (533 códigos)
45.227 visualizaciones desde el 2 de Abril del 2013
Código que muestra como cargar una pagina externa a modo de include() con jquery.

Versión 1
estrellaestrellaestrellaestrellaestrella(6)

Publicado el 2 de Abril del 2013gráfica de visualizaciones de la versión: Versión 1
45.229 visualizaciones desde el 2 de Abril del 2013
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 (6)

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
1 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
pepe
12 de Enero del 2017
estrellaestrellaestrellaestrellaestrella
Pensaba que iba a ser mas sencillo, no tengo mucha experiencia.
Responder
Imágen de perfil
6 de Agosto del 2017
estrellaestrellaestrellaestrellaestrella
Simplificando, como siempre...
Responder
to-up
30 de Diciembre del 2017
estrellaestrellaestrellaestrellaestrella
Recomiendo que mejor ya usen get, hay que actualizarse
Responder

Comentar la versión: Versión 1

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

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2342