En ocasiones hemos querido incluir otros archivos HTML dentro de él HTML que estábamos trabajando, como ocurre por ejemplo con PHP. Estoy hablando de inclusiones directas , queremos tomar un fragmento de HTML y colocarlo directamente en otro, un encabezado y pie de página he incluirlos en todas las páginas:
Ejemplo en PHP
<?php include "./header.html" ?> Contenido de la página <?php include "./footer.html" ?>
Esta forma de trabajar es más limpia y nos ahorra tiempo, ya que solo creamos un header y un footer y lo mostramos en el resto de páginas con la carga del include.
antiguamente se hacía uso de los frames para simular este include, incluso con html5 y los iframes se ha realizado en ocasiones.
<iframe src="./header.html" marginwidth="1" marginheight="1" height="60" width="100%" name="cabecera" scrolling="no" border="0" frameborder="0"></iframe> Contenido de la página <iframe src="./footer.html" marginwidth="1" marginheight="1" height="60" width="100%" name="pie" scrolling="no" border="0" frameborder="0"></iframe>
Pero el contenido de esos iframes no comparte el mismo DOM, por lo que es un poco extraño, sin mencionar que el estilo es lento e incómodo (ya que los iframes no conocen las alturas de sus contenidos).
Bueno pues lo que parecía que no podía ser, ya es posible!, vamos ver como crear un include.
Os dejo un ejemplo completo y de este modo tan sencillo podemos por fin crear includes de forma correcta en nuestro HTML
<!DOCTYPE html>
<html>
<head>
<script>
function includeHTML() {
var z, i, elmnt, file, xhttp;
/* recorrer una colección de todos los elementos HTML:*/
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*buscar elementos con un determinado atributo:*/
file = elmnt.getAttribute("include-html");
if (file) {
/*realizar una solicitud HTTP utilizando el valor del atributo como nombre de archivo:*/
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/*elimina el atributo y llama a esta función una vez más:*/
elmnt.removeAttribute("include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/*salir de la función:*/
return;
}
}
};
</script>
</head>
<body>
<div include-html="header.html"></div>
<div include-html="contenido.html"></div>
<div include-html="footer.html"></div>
<script>
includeHTML();
</script>
</body>
</html>
Creamos includeHTML() js
Creamos los divs que cargaran el contenido de nuestros ficheros html
y llamamos a la función
Qué os ha parecido!! , pues aún hay más tenemos esta otra opción usando jquery
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
$("#includeHtml").load("resultado.html");
});
</script>
</head>
<body>
<h2>Programa para incluir otro archivo HTML en este HTML usando <i>JQuery load</i></h2>
<div id="includeHtml"></div>
</body>
</html>
Bueno os dejo, con algo nuevo para que trabajéis este verano!!.
