Una petición asíncrona (AJAX), es todo lo que necesitas. Si quieres hacerlo con código JavaScript nativo y, por lo que comentas, quieres incluir varios documentos en distintas partes de uno, puedes hacer lo siguiente:
Código Javascript
:
Ver original"use strict";
//La función que hará las inclusiones
var include = function(file, targetId){
var ajax = new XMLHttpRequest();
ajax.open("GET", file, true);
ajax.addEventListener("load", function(){
if (this.status == 200){
document.querySelector("#" + targetId).innerHTML = this.responseText;
}
}, false);
ajax.send();
};
//Las distintas llamadas a la función
include("pagina1.html", "cabecera");
include("pagina2.php", "cuerpo");
include("paginaN.html", "pie");
En donde el primer argumento es el nombre del archivo a incluir (recuerda colocar la ruta relativa si se encuentra en otro directorio), mientras que el segundo es el
id del elemento HTML del documento principal en el cual se incluirá el contenido del archivo externo.
Por ejemplo:
Código HTML:
Ver original<!DOCTYPE html>
<script type="text/javascript"> //El código JavaScript (o un archivo JS externo)
