Crie arquivos de cabeçalho e rodapé para serem incluídos em várias páginas html

140

Quero criar páginas comuns de cabeçalho e rodapé incluídas em várias páginas html.

Eu gostaria de usar javascript. Existe uma maneira de fazer isso usando apenas html e JavaScript?

Quero carregar uma página de cabeçalho e rodapé em outra página html.

javascript jquery html css Prasanth AR
fonte

1

Você está procurando ajax ... $ ('. MyElement) .load (' urltopage.html '); isso carregará o conteúdo de urltopage.html em .myElement

Salketer 10/09/13

stackoverflow.com/a/8592403/896341

Stefan

192

Você pode fazer isso com o jquery .

Coloque este código em index.html

<html>
<head>
<title></title>
<script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous">
</script>
<script> 
$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});
</script> 
</head>
<body>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
</body>
</html>

e coloque esse código header.htmle footer.html, no mesmo local queindex.html

<a href="http://www.google.com">click here for google</a>

Agora, quando você visitar index.html, poderá clicar nas tags de link.

Hariprasad Prolanx
fonte

Sim. todas as páginas devem ter essa estrutura de páginas

Hariprasad Prolanx 10/10

19

carregar ou outra função que importe ou use uma que local filenão funcione na nova versão do Google Chrome ou IE, motivo: segurança!

Sinac

7

Às vezes me pergunto como as pessoas conseguem respirar sem o jQuery. Ou existe um .breathe(in)e .breathe(out)já? Qualquer linguagem de script é puro exagero aqui.

A Conspiração

6

Recebo

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

quando eu corro em cromo

digiwebguy

1

É necessário executar o código no servidor. O que significa que o URL precisa ser "http: // .....".

Patriótico

37

Eu adiciono partes comuns como cabeçalho e rodapé usando o Server Side Include . Não é necessário HTML nem JavaScript. Em vez disso, o servidor da Web adiciona automaticamente o código incluído antes de fazer qualquer outra coisa.

Basta adicionar a seguinte linha onde deseja incluir seu arquivo:

<!--#include file="include_head.html" -->

A conspiração
fonte

6

eu gosto desse jeito antiquado. De fato, parece não ter muitos benefícios ao usar o script para executar uma ação tão simples.

Jenna Leaf

3

De fato, a inclusão de arquivos usando um script possui grandes desvantagens: isso prejudica o desempenho, pois o cliente precisa fazer o download da página principal, carregar o DOM, executar o script e só então pode baixar os arquivos incluídos, o que precisa de uma solicitação adicional do servidor por arquivo incluído . A inclusão de arquivos usando o Server Side Include serve a todos os elementos durante a primeira solicitação do servidor; não é necessária nenhuma ação do cliente.

The Conspiracy

SSI requer o uso de uma extensão de arquivo: .shtml, .stm, .shtm. Ele funciona no Apache, LiteSpeed, nginx, lighttpd e IIS.

Ubershmekel # 29/17

@ubershmekel Como você disse, os servidores da web relevantes suportam SSI. A extensão do arquivo não está limitado a .shtml, .stme .shtm: No IIS, todos os arquivos processadas que pode conter SSI, por exemplo .aspx. Se estiver trabalhando com PHP, você precisará usar o PHP includeou o virtualcomando para obter o mesmo resultado.

The Conspiracy

32

Você deve usar a estrutura de arquivos html com JavaScript? Você já pensou em usar o PHP para poder usar o simples objeto de inclusão do PHP?

Se você converter os nomes de arquivo das suas páginas .html em .php - na parte superior de cada uma das suas páginas .php, poderá usar uma linha de código para incluir o conteúdo do seu header.php

<?php include('header.php'); ?>

Faça o mesmo no rodapé de cada página para incluir o conteúdo do seu arquivo footer.php

<?php include('footer.php'); ?>

Nenhum JavaScript / Jquery ou arquivos incluídos adicionais são necessários.

NB: Você também pode converter seus arquivos .html em arquivos .php usando o seguinte no arquivo .htaccess

# re-write html to php
RewriteRule ^(.*)\.html$ $1.php [L]
RewriteRule ^(.+)/$ http://%{HTTP_HOST}/$1 [R=301,L]


# re-write no extension to .php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.php [NC,L]

Sol
fonte

2

@ Justin808 - o OP não menciona nada sobre uma instalação hospedada local, então eu presumi que ele estava falando sobre arquivos baseados em servidor.

Sol

1

@ Sol No entanto, o OP DID mencionou especificamente o uso de Javascript, portanto sua resposta é fora de tópico. O desenvolvimento da Web de pilha completa está rapidamente se afastando do uso do PHP, o Node.js fornece toda a funcionalidade equivalente e requer apenas o Javascript. TL; DR, responda às perguntas conforme solicitado. O OP queria uma solução JS, por isso é inadequado fornecer a ele uma solução PHP, Ruby, Python, C ++ ou qualquer outra linguagem.

Zach

9

Eu tentei o seguinte: Crie um arquivo header.html como

<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- JS -->
<script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
<script type="text/javascript" src="js/lib/angular-route.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">

<title>Your application</title>

Agora inclua header.html em suas páginas HTML, como:

<head>
   <script type="text/javascript" src="js/lib/jquery-1.11.1.min.js" ></script>
   <script> 
     $(function(){ $("head").load("header.html") });
   </script>
</head>

Funciona perfeitamente bem.

Asheesh Gupta
fonte

1

Solução agradável, mas acho que isso carregaria o framework jquery duas vezes, uma vez para o carregamento inicial da página e, em segundo lugar, quando o método .load () é executado - já que a página de destino também contém jquery.

Delali

8

Você também pode colocar: (load_essentials.js :)

document.getElementById("myHead").innerHTML =
	"<span id='headerText'>Title</span>"
	+ "<span id='headerSubtext'>Subtitle</span>";
document.getElementById("myNav").innerHTML =
	"<ul id='navLinks'>"
	+ "<li><a href='index.html'>Home</a></li>"
	+ "<li><a href='about.html'>About</a>"
	+ "<li><a href='donate.html'>Donate</a></li>"
	+ "</ul>";
document.getElementById("myFooter").innerHTML =
	"<p id='copyright'>Copyright &copy; " + new Date().getFullYear() + " You. All"
	+ " rights reserved.</p>"
	+ "<p id='credits'>Layout by You</p>"
	+ "<p id='contact'><a href='mailto:[email protected]'>Contact Us</a> / "
	+ "<a href='mailto:[email protected]'>Report a problem.</a></p>";

<!--HTML-->
<header id="myHead"></header>
<nav id="myNav"></nav>
Content
<footer id="myFooter"></footer>

<script src="load_essentials.js"></script>

Expandir snippet

JustinM
fonte

6

Acho que as respostas a essa pergunta são muito antigas ... atualmente, alguns navegadores de desktop e dispositivos móveis suportam modelos HTML para fazer isso.

Eu construí um pequeno exemplo:

Testado OK no Chrome 61.0, Opera 48.0, Opera Neon 1.0, Android Browser 6.0, Chrome Mobile 61.0 e Adblocker Browser 54.0
KO testado no Safari 10.1, Firefox 56.0, Edge 38.14 e IE 11

Mais informações de compatibilidade em canisue.com

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Template Example</title>

    <link rel="stylesheet" href="styles.css">
    <link rel="import" href="autoload-template.html">
</head>
<body>

<div class="template-container">1</div>
<div class="template-container">2</div>
<div class="template-container">3</div>
<div class="template-container">4</div>
<div class="template-container">5</div>

</body>
</html>

autoload-template.html

<span id="template-content">
    Template Hello World!
</span>

<script>
    var me = document.currentScript.ownerDocument;
    var post = me.querySelector( '#template-content' );

    var container = document.querySelectorAll( '.template-container' );

    //alert( container.length );
    for(i=0; i<container.length ; i++) {
        container[i].appendChild( post.cloneNode( true ) );
    }
</script>

styles.css

#template-content {
    color: red;
}

.template-container {
    background-color: yellow;
    color: blue;
}

Você pode obter mais exemplos neste postagem do HTML5 Rocks

JavierFuentes
fonte

4

As importações de HTML agora estão obsoletas.

Jonathan Sharman

5

Eu tenho trabalhado em C # / Razor e, como não tenho a configuração do IIS no meu laptop em casa, procurei uma solução javascript para carregar as visualizações, criando uma marcação estática para o nosso projeto.

Eu me deparei com um site que explica métodos de "abandonar jquery", ele demonstra que um método no site faz exatamente o que você procura em javascript simples de Jane ( link de referência na parte inferior da postagem) ). Certifique-se de investigar quaisquer vulnerabilidades de segurança e problemas de compatibilidade, se você pretende usá-lo na produção. Eu não sou, então eu nunca examinei isso sozinho.

Função JS

var getURL = function (url, success, error) {
    if (!window.XMLHttpRequest) return;
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState === 4) {
            if (request.status !== 200) {
                if (error && typeof error === 'function') {
                    error(request.responseText, request);
                }
                return;
            }
            if (success && typeof success === 'function') {
                success(request.responseText, request);
            }
        }
    };
    request.open('GET', url);
    request.send();
};

Obter o conteúdo

getURL(
    '/views/header.html',
    function (data) {
        var el = document.createElement(el);
        el.innerHTML = data;
        var fetch = el.querySelector('#new-header');
        var embed = document.querySelector('#header');
        if (!fetch || !embed) return;
        embed.innerHTML = fetch.innerHTML;

    }
);

index.html

<!-- This element will be replaced with #new-header -->
<div id="header"></div>

views / header.html

<!-- This element will replace #header -->
<header id="new-header"></header>

A fonte não é minha, apenas a refiro, pois é uma boa solução de javascript de baunilha para o OP. O código original está aqui: http://gomakethings.com/ditching-jquery#get-html-from-another-page

querido
fonte

Boa solução. Eu prefiro este a usar jquery.

Delali

2

Aloha a partir de 2018. Infelizmente, não tenho nada legal ou futurista para compartilhar com você.

No entanto, gostaria de salientar que aqueles que comentaram que o load()método jQuery não está funcionando no momento provavelmente estão tentando usar o método com arquivos locais sem executar um servidor web local. Se o fizer, vai jogar a acima erro mencionado "origem cruzada", que especifica que a origem cruz solicita, como a efectuada pelo método de carga só são suportados por sistemas de protocolo, como http, data, ou https. (Suponho que você não esteja fazendo uma solicitação de origem real, ou seja, o arquivo header.html está no mesmo domínio da página da qual você está solicitando)

Portanto, se a resposta aceita acima não estiver funcionando para você, verifique se você está executando um servidor web. A maneira mais rápida e simples de fazer isso se você estiver com pressa (e usando um Mac, que possui o Python pré-instalado) seria ativar um servidor http simples do Python. Você pode ver como é fácil fazer isso aqui .

Eu espero que isso ajude!

Marca
fonte

O uso de um servidor da web derrota o argumento, pelo menos para mim o motivo de usar apenas Javascript é desenvolvê-lo mais facilmente.

Konrad Höffner

1

Também é possível carregar scripts e links no cabeçalho. Vou adicionar um dos exemplos acima ...

<!--load_essentials.js-->
document.write('<link rel="stylesheet" type="text/css" href="css/style.css" />');
document.write('<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />');
document.write('<script src="js/jquery.js" type="text/javascript"></script>');

document.getElementById("myHead").innerHTML =
"<span id='headerText'>Title</span>"
+ "<span id='headerSubtext'>Subtitle</span>";
document.getElementById("myNav").innerHTML =
"<ul id='navLinks'>"
+ "<li><a href='index.html'>Home</a></li>"
+ "<li><a href='about.html'>About</a>"
+ "<li><a href='donate.html'>Donate</a></li>"
+ "</ul>";
document.getElementById("myFooter").innerHTML =
"<p id='copyright'>Copyright &copy; " + new Date().getFullYear() + " You. All"
+ " rights reserved.</p>"
+ "<p id='credits'>Layout by You</p>"
+ "<p id='contact'><a href='mailto:[email protected]'>Contact Us</a> / "
+ "<a href='mailto:[email protected]'>Report a problem.</a></p>";

<!--HTML-->
<header id="myHead"></header>
<nav id="myNav"></nav>
Content
<footer id="myFooter"></footer>

<script src="load_essentials.js"></script>

Samuel Omopariola
fonte

0

outra abordagem disponibilizada desde que essa pergunta foi feita pela primeira vez é usar o reactrb-express (consulte http://reactrb.org ). Isso permitirá que você faça scripts em ruby no lado do cliente, substituindo seu código html por componentes de reação escritos em ruby.

Mitch VanDuyn
fonte

1

op pedia apenas usando HTML e JavaScript, mas você levá-lo para usar ruby ..: D lol mas arrefecer homem da ferramenta ..

Meily Chhon

Tomei o espírito da pergunta - sem as linguagens de modelagem do lado do servidor. tudo é compilado em Javascript, então acredito que atende à intenção da pergunta.

precisa saber é o seguinte

-1

Salve o HTML que você deseja incluir em um arquivo .html:

Content.html

<a href="howto_google_maps.asp">Google Maps</a><br>
<a href="howto_css_animate_buttons.asp">Animated Buttons</a><br>
<a href="howto_css_modals.asp">Modal Boxes</a><br>
<a href="howto_js_animate.asp">Animations</a><br>
<a href="howto_js_progressbar.asp">Progress Bars</a><br>
<a href="howto_css_dropdown.asp">Hover Dropdowns</a><br>
<a href="howto_js_dropdown.asp">Click Dropdowns</a><br>
<a href="howto_css_table_responsive.asp">Responsive Tables</a><br>

Inclua o HTML

A inclusão de HTML é feita usando um atributo w3-include-html :

Exemplo

    <div w3-include-html="content.html"></div>

Adicione o JavaScript

As inclusões HTML são feitas por JavaScript.

    <script>
    function includeHTML() {
      var z, i, elmnt, file, xhttp;
      /*loop through a collection of all HTML elements:*/
      z = document.getElementsByTagName("*");
      for (i = 0; i < z.length; i++) {
        elmnt = z[i];
        /*search for elements with a certain atrribute:*/
        file = elmnt.getAttribute("w3-include-html");
        if (file) {
          /*make an HTTP request using the attribute value as the file name:*/
          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.";}
              /*remove the attribute, and call this function once more:*/
              elmnt.removeAttribute("w3-include-html");
              includeHTML();
            }
          } 
          xhttp.open("GET", file, true);
          xhttp.send();
          /*exit the function:*/
          return;
        }
      }
    }
    </script>

Ligue para includeHTML () na parte inferior da página:

Exemplo

<!DOCTYPE html>
<html>
<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /*loop through a collection of all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /*make an HTTP request using the attribute value as the file name:*/
      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.";}
          /*remove the attribute, and call this function once more:*/
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }      
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
    }
  }
};
</script>
<body>

<div w3-include-html="h1.html"></div> 
<div w3-include-html="content.html"></div> 

<script>
includeHTML();
</script>

</body>
</html>

Raaf003
fonte

Eu recebo uma página em branco quando testo o index.html depois disso #

Hussein Elbeheiry 29/08

Crie arquivos de cabeçalho e rodapé para serem incluídos em várias páginas html

Respostas: