Foros del Web - Ver Mensaje Individual

Helbira · #18 (**permalink**) 03/11/2009, 10:21

A ver si te sirve este código. Te he puesto comentarios en mayusculas precediendo a las modificaciones que he hecho.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ".org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=".org/1999/xhtml" lang="es" xml:lang="es">
<head>
<title>Pagina</title>
<meta content='text/html; charset=ISO-8859-1' http-equiv='Content-Type'/>
<meta http-equiv="imagetoolbar" content="no"/>
<link rel="stylesheet" href="./inicio.css" type="text/css" media="screen, print"/>
<script type="text/javascript" src="./js/util02.js"></script>

<!-- HACES REFERENCIA A LA LIBRERIA JQUERY CON LA SIGUIENTE LINEA -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

</head>
<body>
<div id="fondo"></div>
<div id="contenido">
<div id="cabecera"><img src="./css/img/cabecera.gif" alt="" /></div>
<div id="lines">
<ul id="erm">
<li><a href="menu01.htm">Menu-01</a></li>
<li><a href="menu02.htm">Menu-02</a></li>
<li><a href="menu03.htm">Menu-03</a></li>
<li><a href="menu04.htm">Menu-04</a></li>
<li><a href="menu05.htm">Menu-05</a></li>
</ul>
</div>
<!-- Contenido -->
<div class="Content">
<!-- Columna 1 -->
<div id="uno">
<!-- CREAS UN DIV POR CADA ARCHIVO QUE QUIERAS INLCUIR EN TU PAGINA CON LO QUE ANTES USABAS INCLUDE -->
<!-- CON LO QUE TIENES ENTRE LAS ETIQUETAS SCRIPT CARGAS CADA HTML -->
<script>
$("#uno").load("pagina01.htm");
</script>
</div>
<div id="dos">
<script>
$("#dos").load("pagina02.htm");
</script>

</div>
<!-- Columna 2 -->
<div id="tres">
<script>
$("#tres").load("pagina03.htm");
</script>

</div>
<!-- Columna 3 -->
<div id="cuatro">
<script>
$("#cuatro").load("pagina04.htm");
</script>
</div>
<div id="cinco">
<script>
$("#cinco").load("pagina05.htm");
</script>
</div>
<div class="clear"></div>
</div>
<!-- Footer ---->
<div class="pie-background">
<div class="pie-texto">
</div>
</div>
</div>
</body>
</html>

La clave está en incluir la librería JQuery con:

Código:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

Y luego incluyes los HTML externos con el siguiente código en cada DIV donde quieras incluirlo:

Código:

<div id="tres">
   <script>
     $("#tres").load("pagina03.htm");
   </script>
</div>

Suerte!

Cita:

Iniciado por corretodo

Muchas gracia por tu ofrecimiento.
Se trata de que he de pasar mi pagina que la tengo en php a html.
Porque el servidor que he de instalarla solo soporta html.

Para facilitar la actualizacion de mi web en vez de tener todo en una pagina enorme, con el include de php cargaba la pagina principal por secciones.
De esta forma si tenia que modificar algo era mas facil hacerlo por dichas secciones.

Y pedia aqui si habia algo en html que pudiera sustituir el include de php por otro comando que hiciera algo similar.

En la pagina que tu me has recomendado hay un ejemplo como comentas pero utiliza el a href por lo que yo he visto y eso no es lo que necesito o al menos no veo la forma de poder cargar una pagina automaticamente dentro de la otra como hace el comando include de php.

El menu lo dejo como esta y no necesito ajax para el menu.

Comentarte que el nuevo servidor solo soporta html y ajax como comentas es javascript, entonces se ejecuta al lado del cliente.
Con lo cual si hubiera un comando equivalente en ajax al include de php lo tengo solucionado.

Te pongo el codigo de mi index para que veas lo que realmente necesito.
Esta muy claro el codigo te que pongo y es sustituir el comando include por otro que pueda tener ajax.

Aqui va el codigo:
-----------------------------------------------------------------------------------------------------

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ".org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=".org/1999/xhtml" lang="es" xml:lang="es">
<head>
<title>Pagina</title>
<meta content='text/html; charset=ISO-8859-1' http-equiv='Content-Type'/>
<meta http-equiv="imagetoolbar" content="no"/>
<link rel="stylesheet" href="./inicio.css" type="text/css" media="screen, print"/>
<script type="text/javascript" src="./js/util02.js"></script>
</head>
<body>
<div id="fondo"></div>
<div id="contenido">
<div id="cabecera"><img src="./css/img/cabecera.gif" alt="" /></div>
<div id="lines">
<ul id="erm">
<li><a href="menu01.htm">Menu-01</a></li>
<li><a href="menu02.htm">Menu-02</a></li>
<li><a href="menu03.htm">Menu-03</a></li>
<li><a href="menu04.htm">Menu-04</a></li>
<li><a href="menu05.htm">Menu-05</a></li>
</ul>
</div>
<!-- Contenido -->
<div class="Content">
<!-- Columna 1 -->
<div id="uno">
<?php include('pagina01.htm'); ?>
<?php include('pagina02.htm'); ?>
</div>
<!-- Columna 2 -->
<div id="tres">
<?php include('pagina03.htm'); ?>
</div>
<!-- Columna 3 -->
<div id="uno">
<?php include('pagina04.htm'); ?>
<?php include('pagina05.htm'); ?>
</div>
<div class="clear"></div>
</div>
<!-- Footer ---->
<div class="pie-background">
<div class="pie-texto">
</div>
</div>
</div>
</body>
</html>

----------------------------------------------------------------------------------------------------