Hacer que los archivos de encabezado y pie de página se incluyan en varias páginas html
Quiero crear páginas de encabezado y pie de página comunes que se incluyan 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.
12 answers
Puede 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.html y footer.html, en la misma ubicación que index.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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-29 05:12:18
¿ Debe utilizar la estructura de archivos html con JavaScript? ¿Ha considerado usar PHP en su lugar para que pueda usar PHP simple include object?
Si convierte los nombres de archivo de su .páginas html .php-a continuación, en la parte superior de cada uno de sus .páginas php puede usar una línea de código para incluir el contenido de su encabezado.php
<?php include('header.php'); ?>
Haga lo mismo en el pie de página de cada página para incluir el contenido de su pie de página.php file
<?php include('footer.php'); ?>
Sin JavaScript / Jquery o adicional archivos incluidos requeridos.
NB También podría convertir su.archivos html a .archivos php usando lo siguiente en su .htaccess file
# 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]
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-25 05:51:38
Agrego partes comunes como encabezado y pie de página usando El lado del servidor incluye. No se necesita HTML ni JavaScript. En su lugar, 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" -->
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-24 22:35:54
Prueba esto,
<html>
<head>
<title></title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="header"></div><br />
<div id="content">
Main Content
</div><br />
<div id="footer"></div>
<script>
$("#header").load("header.html");
$("#footer").load("footer.html");
</script>
</body>
</html>
Puede encontrar demo aquí
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-14 17:08:16
He intentado esto: Cree un encabezado file .html me gusta
<!-- 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 incluye el encabezado .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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-13 07:22:28
También podrías 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 © " + 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>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-24 21:49:16
He estado trabajando en C#/Razor y como no tengo la configuración de IIS en mi computadora portátil doméstica, busqué una solución javascript para cargar vistas mientras creaba marcas estáticas para nuestro proyecto.
Me topé con un sitio web que explica los métodos de "abandonar jquery", demuestra que un método en el sitio hace exactamente lo que buscas en javascript Jane simple ( enlace de referencia en la parte inferior de post). Asegúrese de investigar cualquier vulnerabilidad de seguridad y problemas de compatibilidad si tiene la intención para usar esto en producción. No lo soy, así que nunca lo investigué.
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();
};
Obtener 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;
}
);
Índice.html
<!-- This element will be replaced with #new-header -->
<div id="header"></div>
Vistas / encabezado.html
<!-- This element will replace #header -->
<header id="new-header"></header>
El código fuente no es mío, simplemente lo estoy haciendo referencia, ya que es una buena solución de javascript de vainilla para el OP. El código original vive aquí: http://gomakethings.com/ditching-jquery#get-html-from-another-page
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-07 18:31:04
Creo que las respuestas a esta pregunta son demasiado viejas... actualmente algunos navegadores de escritorio y móviles soportan Plantillas HTML para hacer esto.
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;
}
Puede obtener más ejemplos en este HTML5 Rocks post
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-21 09:59:11
También es posible cargar scripts y enlaces en el encabezado. Voy a añadir 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 © " + 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-10 12:39:11
Otro enfoque disponible desde que se hizo esta pregunta por primera vez es usar reactrb-express (ver http://reactrb.org ) Esto le permitirá escribir scripts en ruby en el lado del cliente, reemplazando su código html con componentes de react escritos en ruby.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-13 04:51:49
Aloha de 2018. Desafortunadamente, no tengo nada guay o futurista que compartir contigo.
Sin embargo, quería señalar a aquellos que han comentado que el método jQuery load() no funciona en el presente, probablemente estén tratando de usar el método con archivos locales sin ejecutar un servidor web local. Al hacerlo, se producirá el error de "origen cruzado" mencionado anteriormente, que especifica que las solicitudes de origen cruzado, como las realizadas por el método load, solo son compatibles con el protocolo esquemas como http, data, o https. (Estoy asumiendo que no estás haciendo una solicitud de origen cruzado real, es decir, el encabezado.el archivo html está en realidad en el mismo dominio que la página de la que lo estás solicitando)
Por lo tanto, si la respuesta aceptada anterior no funciona para usted, asegúrese de que está ejecutando un servidor web. La forma más rápida y sencilla de hacerlo si tienes prisa (y usas un Mac, que tiene Python preinstalado) sería crear un simple servidor http Python. Puedes ver lo fácil que es es hacer eso aquí .
Espero que esto ayude!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-27 17:20:09
Guarde el HTML que desea incluir en un .archivo html:
Contenido.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
Incluir HTML se hace usando un atributo w3-include-html:
Ejemplo
<div w3-include-html="content.html"></div>
Añadir 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>
Call includeHTML () en la parte inferior 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-01 07:32:43