0

Pessoal tenho dois arquivos externos chamados header.html e footer html contendo cabeçalhos e rodapé de um site, com menus e etc. Preciso fazer a inclusão desses arquivos externos nas páginas do site sem a utilização do PHP.

Existe como fazer algo tipo:

<?php require_once("include/header.html"); ?>

Fazendo-se uso de javascript ou de outra forma que seja Client-side e não Server-side como em outras respostas?

0

2 Respostas 2

1

Crie uma div em cada local que você quer carregar os arquivos com ids header e footer e puxe-os via Ajax:

var http = false;
if(navigator.appName == "Microsoft Internet Explorer") {
    http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
    http = new XMLHttpRequest();
}

var paginas = ["header","footer"];

window.onload = function(){
    carrega_paginas(0);
}

function carrega_paginas(i){
    http.open("GET",paginas[i]+".html",true);
    http.onreadystatechange=function(){
        if(http.readyState==4){
            document.getElementById(paginas[i]).innerHTML = http.responseText;
            if(i == 0){
                carrega_paginas(1);
            }
        }
    }
    http.send(null);
}
3
  • Nota para que esse processo é mais custoso ao navegador do que resolver tudo pelo servidor, sem falar que é sensível à velocidade (e qualidade de sinal) da rede Commented 11/10/2017 às 2:50
  • @JeffersonQuesado Sim, mas ele não quer fazer isso pelo servidor.
    – Sam
    Commented 11/10/2017 às 3:00
  • Por isso que coloquei como uma "nota" sobre sua resposta, para que o AP perceba quais problemas enfrentar e que pessoas futuras que parem aqui saibam disso também. Eu gosto de colocar informações de que a ideia não é legal, como o autor dessa resposta deixou claro no infográfico: pt.stackoverflow.com/a/240835/64969 Commented 11/10/2017 às 3:08
0

Em javascript:

const ajax = (url, cb, data) => {
    const xhr = new XMLHttpRequest();
    xhr.addEventListener("readystatechange", () => {
        if (this.readyState == 4 && this.status == 200) cb(this.responseText);
    })
    xhr.open(data?"get":"post", url, true);
    xhr.setRequestHeader("Content-type:", "application/x-www-form-urlencoded");
    xhr.send(data);
}
ajax("header.php", conteudo => document.body.appendChild(conteudo));
1
  • Coloco esse código dentro de um arquivo javascript e uso a última linha para chamar o arquivo no local onde quiser? Commented 10/10/2017 às 22:35

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .