javascript - secciones - section html ejemplos
Haga que los archivos de encabezado y pie de página se incluyan en varias páginas html (11)
¿Debe usar la estructura de archivos html con JavaScript? ¿Ha considerado utilizar PHP en su lugar para poder usar el simple objeto PHP include?
Si convierte los nombres de archivo de sus páginas .html a .php, 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 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 archivo footer.php
<?php include(''footer.php''); ?>
No se requiere JavaScript / Jquery o archivos adicionales incluidos.
NB 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]
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 hacerlo utilizando solo html y JavaScript?
Quiero cargar una página de encabezado y pie de página dentro de otra página html.
Agrego partes comunes como encabezado y pie de página usando Server Side Includes . 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" -->
Aloha de 2018. Desafortunadamente, no tengo nada genial ni futurista para compartir con ustedes.
Sin embargo, quería señalar a aquellos que han comentado que el método jQuery load() no funciona en el presente probablemente intenten usar el método con archivos locales sin ejecutar un servidor web local. Al hacerlo, arrojará el error de "origen cruzado" mencionado anteriormente, que especifica que las solicitudes de origen cruzadas, como la realizada por el método de carga, solo se admiten para esquemas de protocolo como http , data o https . (Supongo que no está realizando una solicitud real de origen cruzado, es decir, el archivo header.html está realmente en el mismo dominio que la página desde la que lo solicita)
Por lo tanto, si la respuesta aceptada anteriormente no le funciona, asegúrese de que está ejecutando un servidor web. La forma más rápida y sencilla de hacerlo si tiene prisa (y usar una Mac, que tiene Python preinstalado) sería activar un simple servidor de Python http. Puedes ver lo fácil que es hacer eso here .
¡Espero que esto ayude!
Creo que las respuestas a esta pregunta son demasiado antiguas ... actualmente, algunos navegadores de escritorio y móviles admiten plantillas HTML para hacer esto.
He creado 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
He estado trabajando en C # / Razor y dado que no tengo la configuración de IIS en mi computadora portátil hogareña, busqué una solución de javascript para cargar vistas mientras creaba marcas estáticas para nuestro proyecto.
Me encontré con un sitio web que explica los métodos de "abandono de jquery", que demuestra que un método en el sitio hace exactamente lo que buscas en javascript simple de Jane ( 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 investigué 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();
};
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;
}
);
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 de javascript de vanilla para el OP. El código original vive aquí: http://gomakethings.com/ditching-jquery#get-html-from-another-page
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 incluye header.html en tus 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.
Otro enfoque disponible desde que se formuló esta pregunta por primera vez es usar reactrb-express (ver http://reactrb.org ). Esto le permitirá hacer una secuencia de comandos en ruby en el lado del cliente, reemplazando su código html con componentes de reacción escritos en ruby.
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>
Puedes encontrar la demo here
Puedes lograr esto con jquery .
Coloque este código en index.html
<html>
<head>
<title></title>
<script src="//code.jquery.com/jquery-1.10.2.js"></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 coloque 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.
También es posible cargar scripts y enlaces en el encabezado. Voy a agregar uno de los ejemplos de arriba ...
<!--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>
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 © " + 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>