Incluir otro archivo HTML en un archivo HTML
Tengo 2 archivos HTML, supongo a.htmly b.html. En a.htmlquiero incluir b.html.
En JSF puedo hacerlo así:
<ui:include src="b.xhtml" />
Significa que dentro a.xhtmldel archivo puedo incluir b.xhtml.
¿Cómo podemos hacerlo en el *.htmlarchivo?
En mi opinión, la mejor solución utiliza jQuery:
a.html:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
b.html:
<p>This is my include file</p>
Este método es una solución simple y limpia a mi problema.
La .load()documentación de jQuery está aquí .
Ampliando la respuesta de lolo , aquí hay un poco más de automatización si tienes que incluir muchos archivos. Utilice este código JS:
$(function () {
var includes = $('[data-include]')
$.each(includes, function () {
var file = 'views/' + $(this).data('include') + '.html'
$(this).load(file)
})
})
Y luego incluir algo en el html:
<div data-include="header"></div>
<div data-include="footer"></div>
Que incluiría el archivo views/header.htmly views/footer.html.
Mi solución es similar a la de lolo anterior. Sin embargo, inserto el código HTML a través de document.write de JavaScript en lugar de usar jQuery:
a.html:
<html>
<body>
<h1>Put your HTML content before insertion of b.js.</h1>
...
<script src="b.js"></script>
...
<p>And whatever content you want afterwards.</p>
</body>
</html>
b.js:
document.write('\
\
<h1>Add your HTML code here</h1>\
\
<p>Notice however, that you have to escape LF's with a '\', just like\
demonstrated in this code listing.\
</p>\
\
');
La razón por la que no uso jQuery es que jQuery.js tiene un tamaño de ~90 kb y quiero mantener la cantidad de datos a cargar lo más pequeña posible.
Para obtener el archivo JavaScript con el escape correcto sin mucho trabajo, puede usar el siguiente comando sed:
sed 's/\\/\\\\/g;s/^.*$/&\\/g;s/'\''/\\'\''/g' b.html > escapedB.html
O simplemente use el siguiente script bash útil publicado como Gist en Github, que automatiza todo el trabajo necesario y lo convierte b.htmla b.js:
https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6
Créditos a Greg Minshall por el comando sed mejorado que también evita las barras invertidas y las comillas simples, que mi comando sed original no consideró.
Alternativamente, para los navegadores que admiten literales de plantilla, también funciona lo siguiente:
b.js:
document.write(`
<h1>Add your HTML code here</h1>
<p>Notice, you do not have to escape LF's with a '\',
like demonstrated in the above code listing.
</p>
`);
Consulte las importaciones de HTML5 a través del tutorial de Html5rocks y en Polymer-Project.
Por ejemplo:
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
