incluir html en archivos js

villagran_gg · #1 (**permalink**) 19/07/2016, 00:05

Una duda en js, como puedo hacer para incluir un archivo dentro de otro archivo, digamos en php es include("ruta del archivo") y en js como seria ??
es que quiero traer el html de un archivo e incluirlo en diversos archivos .html, tengo que hacer un trabajo con github page. y son por lo menos 5 vistas, y cada una comparte el header y el footer

leugimsiul · #2 (**permalink**) 19/07/2016, 00:55

Incluirlo como el include de php no, pero puedes traerte el html de un archivo e incluirlo tu mismo en el cuerpo de la página, por ejemplo:

Con jQuery:

Código Javascript:

Ver original$.get("pathtomypage/mypage.html", function(html){
    $("body").html(html);
});

Con vanilla javascript también puedes por supuesto, aquí tienes como hacer una petición AJAX https://developer.mozilla.org/es/docs/AJAX/Primeros_Pasos luego es incluir el html resultante en el cuerpo:

Código Javascript:

Ver originaldocument.getElementsByTagName('body')[0].innerHTML = html;

Saludos!

Alexis88 · #3 (**permalink**) 19/07/2016, 15:10

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>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <title>Ejemplo</title>
</head>
<body>
    <header id="cabecera"></header>
    <section id="cuerpo"></section>
    <footer id="pie"></footer>
    <script type="text/javascript">
        //El código JavaScript (o un archivo JS externo)
    </script>
</body>
</html>