Intento aclarar lo que quiero hacer. Tengo algunos archivos HTML, y cada uno de ellos quiero renderizarlos parcialmente en otro archivo HTML, por ejemplo header.html y footer.html para observar el concepto DRY.Representación parcial en HTML/JavaScript
archivos HTML deben tener este aspecto:
<!--render header.html-->
<div>
Content
</div>
<!--render footer.html-->
¿Cómo puedo hacer eso?
Here's a link (la primera de Google podría agregar) que explica cómo hacerlo en varios idiomas.
También tenga en cuenta que algunos IDEs se ocupan de esto por usted. Dreamweaver es un ejemplo; en ASP.NET hay páginas maestras; y así.
PHP:
<?php
require($DOCUMENT_ROOT . "path to file/include-file.html");
?>
ASP:
<!--#include file="path to file/include-file.html"-->
JS:
JavaScript es otra manera de incluir HTML en las páginas de su sitio . Esto tiene la ventaja de no requerir la programación a nivel de servidor . Pero es un poco más complicado que el nivel de servidor incluir métodos.
Guardar el código HTML para los elementos comunes de su sitio a un archivo JavaScript . Cualquier HTML escrito en este archivo, se debe imprimir en la pantalla con la función document.write.
Use una etiqueta de secuencia de comandos para incluir el archivo JavaScript en sus páginas.
< script type = "text/javascript" src = "ruta al archivo/include-file.js">- usar el mismo código en cada página que desea incluir en el archivo.
POR FAVOR que la versión JS es NO ideal.
1. JS puede estar deshabilitado o no disponible en el navegador.
2. La página no se procesará ni se cargará a la vez.
Además, no creo que DRY realmente cuente para este. Considere usar un IDE que cree plantillas de página para usted (como Dreamweaver, por ejemplo).
Si eres lo suficientemente valiente (y un poco pasada de moda) y no se puede utilizar cualquiera de los anteriores, considerar el uso de un iframe para su contenido:
<html>
<body>
<div>my header</div>
<iframe src="mycontent.html" />
<div>my fooder</div>
</body>
</html>
RENUNCIA
lo haría más bien me corté las manos que implementar el enfoque iframe o JS.Considere detenidamente si realmente NECESITA para hacer esto.
Está tratando de incluir archivos HTML en archivos HTML, ¿cómo se usa php en un archivo de extensión .html? – DannyG
@DannyG Mi respuesta demuestra cómo esto se puede lograr en una serie de tecnologías. Si bien no lo recomiendo, si el OP quiere hacer esto con archivos HTML solo entonces las opciones son JS o IFRAME como se indica en mi publicación. Cita de la sección JS: "no requiere programación a nivel de servidor" –
@DannyG JS también se puede utilizar para hacer solicitudes XHR para extraer el contenido en. –
Si está utilizando la programación del lado del servidor, puede usar la inclusión del lado del servidor else si su archivo de host es un archivo HTML, entonces puede usar la etiqueta html SCRIPT para incluir los archivos header.html y footer.html. Sin embargo, no estoy seguro de lo que realmente quiere decir con la representación parcial de archivos HTML?
No uso ningún lenguaje del lado del servidor. Solo JavaScript, HTML y jQuery. –
Bueno, en ese caso, puede usar la etiqueta SCRIPT para incluir el archivo HTML con el atributo src que tiene la URL del archivo HTML. El artículo publicado por flem es muy útil. – Shant
Si solo está utilizando HTML y Javascript, puede incluir jQuery y usar una solicitud AJAX para cargar el contenido de otra página HTML en su página principal.
Tener un vistazo a la jQuery 'load()' función aquí:
Asumiendo que su tener el siguiente código HTML:
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
su uso podría ser algo como esto:
$('#header').load('header.html');
$('#footer').load('footer.html');
Esto provoca un error de solicitud de origen cruzado para mí: -/ – ajbraus
Funcionará si está intentando cargar contenido de otro dominio (a menos que haya activado CORS) – dougajmcdonald
... o si está ejecutando esto desde un archivo html local . – marsze
Si está buscando un lado del cliente tan solo Si solo tiene html/js, debería echar un vistazo a AngularJS y su sintaxis ngInclude.
gracias Christoph! "ng-include src" es genial, parece que fragment.js hace el mismo trabajo, pero aumenta el error ... – dfang
¿Quieres incluir el contenido de un archivo html en otro? – starbeamrainbowlabs
@starbeamrainbowlabs: Exactamente, sí. –
¿Puede usar PHP u otro lenguaje de programación del lado del servidor, o tiene que ser del lado del cliente? – starbeamrainbowlabs