Haga que los archivos de encabezado y pie de página se incluyan en varias páginas html

140

Quiero crear páginas comunes de encabezado y pie de página que se incluyen en varias páginas html.

Me gustaría usar javascript. ¿Hay alguna manera de hacer esto usando solo html y JavaScript?

Quiero cargar una página de encabezado y pie de página dentro de otra página html.

javascript  jquery  html  css 
— Prasanth AR
fuente
1
Está buscando ajax ... $ ('. MyElement) .load (' urltopage.html '); esto cargará el contenido de urltopage.html en .myElement
— Salketer
— Stefan

Respuestas:

192

Puedes lograr esto con jquery .

Coloque este código en 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>

y poner este código en header.htmly footer.html, en la misma ubicación queindex.html

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

Ahora, cuando visite index.html, debería poder hacer clic en las etiquetas de enlace.

— Hariprasad Prolanx
fuente
Si. toda la página debe tener esta estructura de página
— Hariprasad Prolanx
19
cargar u otra función que importe o utilice un local fileno funciona en la nueva versión de Google Chrome o IE, razón: ¡seguridad!
— Sinac
77
A veces me pregunto cómo las personas pueden respirar sin jQuery. ¿O hay un .breathe(in)y .breathe(out)ya? Cualquier lenguaje de script es puramente excesivo aquí.
— The Conspiracy
66
Sigo recibiendo Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.cuando corro en Chrome
— digiwebguy
1
Es necesario ejecutar el código en el servidor. Lo que significa que la URL debe ser como "http: // .....".
— Patriótico
37

Agrego partes comunes como encabezado y pie de página usando Server Side incluye . No se necesita HTML ni JavaScript. En cambio, el servidor web agrega automáticamente el código incluido antes de hacer cualquier otra cosa.

Simplemente agregue la siguiente línea donde desea incluir su archivo:

<!--#include file="include_head.html" -->
— La Conspiración
fuente
66
Me gusta esta forma anticuada. De hecho, no parece tener muchos beneficios usar un script para realizar una acción tan simple.
— Jenna Leaf
3
De hecho, incluir archivos que usan un script tiene grandes desventajas: obstaculiza el rendimiento ya que el cliente necesita descargar la página principal, cargar el DOM, ejecutar el script y solo entonces puede descargar los archivos incluidos, que necesitan una solicitud de servidor adicional por archivo incluido . La inclusión de archivos que utilizan Server Side Incluye sirve todos los elementos durante la primera solicitud del servidor, no se necesita ninguna acción del cliente.
— The Conspiracy
SSI requiere el uso de una extensión de archivo: .shtml, .stm, .shtm. Funciona en Apache, LiteSpeed, nginx, lighttpd e IIS.
— ubershmekel
@ubershmekel Como dijiste, los servidores web relevantes admiten SSI. La extensión del archivo no se limita a .shtml, .stmy .shtm: En IIS, todos los archivos analizados pueden contener SSI, por ejemplo .aspx. Si trabaja con PHP, debe utilizar PHP includeo el virtualcomando en su lugar para lograr el mismo resultado.
— La conspiración
32

¿Debe usar la estructura de archivos html con JavaScript? ¿Ha considerado usar PHP en su lugar para poder usar PHP simple objeto de inclusión?

Si convierte los nombres de archivo de sus páginas .html a .php, entonces en la parte superior de cada una de sus páginas .php puede usar una línea de código para incluir el contenido de su header.php 

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

Haga lo mismo en el pie de página de cada página para incluir el contenido de su archivo footer.php

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

No se requiere JavaScript / Jquery ni archivos adicionales incluidos.

Nota: También puede convertir sus archivos .html a archivos .php usando lo siguiente en su archivo .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
fuente
2
@ Justin808: el OP no menciona nada sobre una instalación alojada local, por lo que supuse que estaba hablando de archivos basados ​​en el servidor.
— Sol
1
@Sol Sin embargo, el OP mencionó específicamente querer usar Javascript, por lo que su respuesta está fuera de tema. El desarrollo web de pila completa se está alejando rápidamente del uso de PHP, Node.js proporciona todas las funciones equivalentes y solo requiere el uso de Javascript. TL; DR por favor conteste las preguntas como se le preguntó. El OP quería una solución JS, por lo que no es apropiado darle una solución PHP, Ruby, Python, C ++ o cualquier otro lenguaje.
— Zach
9

Intenté esto: crear un archivo 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>

Ahora incluya header.html en sus 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 perfectamente bien.

— Asheesh Gupta
fuente
1
Buena solución, pero creo que esto cargaría el marco jquery dos veces, una para la carga de la página inicial, y en segundo lugar cuando se ejecuta el método .load (), ya que la página de destino también contiene jquery.
— Delali
8

También podría poner: (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:you@you.com'>Contact Us</a> / "
	+ "<a href='mailto:you@you.com'>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 fragmento

— JustinM
fuente
6

Creo que las respuestas a esta pregunta son demasiado antiguas ... actualmente, algunos navegadores de escritorio y móviles admiten plantillas HTML para hacerlo.

He construido un pequeño ejemplo:

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

Más información de compatibilidad en 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;
}

Puedes obtener más ejemplos en esta publicación de HTML5 Rocks

— JavierFuentes
fuente
44
Importaciones HTML ahora está en desuso.
— Jonathan Sharman el
5

He estado trabajando en C # / Razor y, dado que no tengo la configuración de IIS en la computadora portátil de mi casa, busqué una solución de JavaScript para cargar las vistas mientras creaba un marcado estático para nuestro proyecto.

Me topé con un sitio web que explica los métodos de "deshacerse de jquery", demuestra que un método en el sitio hace exactamente lo que buscas en javascript javascript ( enlace de referencia en la parte inferior de la publicación ). Asegúrese de investigar cualquier vulnerabilidad de seguridad y problemas de compatibilidad si tiene la intención de usar esto en producción. No lo soy, así que nunca lo miré yo mismo.

Función 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();
};

Obtén el contenido

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>

La fuente no es mía, solo estoy haciendo referencia a ella, ya que es una buena solución javascript de vainilla para el OP. El código original vive aquí: http://gomakethings.com/ditching-jquery#get-html-from-another-page

— más oscuro
fuente
Buena solución. Prefiero este a usar jquery.
— Delali
2

Aloha de 2018. Desafortunadamente, no tengo nada genial o futurista para compartir con ustedes.

Sin embargo, quería señalar a aquellos que han comentado que el load()método jQuery no está funcionando en el presente, probablemente estén tratando de usar el método con archivos locales sin ejecutar un servidor web local. Si lo hace, lanzar el anteriormente mencionado error "origen cruz", que especifica que el origen cruz solicita tal como la realizada por el método de carga solamente se admiten para esquemas de protocolo como http, datao https. (Supongo que no está haciendo una solicitud de origen cruzado real, es decir, el archivo header.html está realmente en el mismo dominio que la página desde la que lo solicita)

Entonces, si la respuesta aceptada arriba no funciona para usted, asegúrese de estar ejecutando un servidor web. La forma más rápida y sencilla de hacerlo si tienes prisa (y estás usando una Mac, que tiene Python preinstalado) sería activar un servidor http Python simple. Puedes ver lo fácil que es hacer eso aquí .

¡Espero que esto ayude!

— marca
fuente
Sin embargo, usar un servidor web no sirve de nada, al menos para mí la razón para usar Javascript solo es desarrollarlo más fácilmente.
— Konrad Höffner el
1

También es posible cargar scripts y enlaces en el encabezado. Lo agregaré uno de los ejemplos anteriores ...

<!--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:you@you.com'>Contact Us</a> / "
+ "<a href='mailto:you@you.com'>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
fuente
0

otro enfoque disponible desde que se hizo esta pregunta por primera vez es usar reactrb-express (consulte http://reactrb.org ) Esto le permitirá escribir en ruby ​​en el lado del cliente, reemplazando su código html con componentes de reacción escritos en ruby.

— Mitch VanDuyn
fuente
1
op preguntó solo usando html y javascript pero lo llevas a usar ruby ​​..: D lol pero genial herramienta man ..
— Meily Chhon
Tomé el espíritu de la pregunta como fuera, sin lenguajes de plantillas del lado del servidor. todo se compila en Javascript, así que creo que cumple con la intención de la pregunta.
— Mitch VanDuyn
-1

Guarde el HTML que desea incluir en un archivo .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>

Incluir el HTML

La inclusión de HTML se realiza mediante el uso de un atributo w3-include-html :

Ejemplo

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

Agrega el JavaScript

Las inclusiones HTML se realizan mediante 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>

Llame a includeHTML () al final de la página:

Ejemplo

<!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
fuente
Recibo una página en blanco cuando
— pruebo
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.