Ho 2 file HTML, supponiamo a.html
e b.html
. In a.html
voglio includere b.html
.
In JSF posso fare così:
<ui:include src="b.xhtml" />
Significa che dentro il file a.xhtml
, posso includere b.xhtml
.
Come possiamo farlo nel file *.html
?
Secondo me la soluzione migliore è 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>
Questo metodo è una soluzione semplice e pulita al mio problema.
La documentazione di jQuery .load()
è qui.
La mia soluzione è simile a quella di lolo sopra. Tuttavia, inserisco il codice HTML tramite JavaScript'document.write invece di usare 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 ragione per me contro l'uso di jQuery è che jQuery.js è ~90kb di dimensione, e voglio mantenere la quantità di dati da caricare il più piccola possibile.
Al fine di ottenere il file JavaScript correttamente sotto escape senza molto lavoro, è possibile utilizzare il seguente comando sed:
sed 's/\\/\\\\/g;s/^.*$/&\\/g;s/'\''/\\'\''/g' b.html > escapedB.html
Oppure basta usare il seguente pratico script bash pubblicato come Gist su Github, che automatizza tutto il lavoro necessario, convertendo b.html
in b.js
:
https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6
Crediti a Greg Minshall per il comando sed migliorato che esegue anche l'escape delle barre e degli apici singoli, che il mio comando sed originale non considerava.
In alternativa, per i browser che supportano i template literals funziona anche il seguente:
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>
`);
In alternativa, se avete accesso al file .htaccess sul vostro server, potete aggiungere una semplice direttiva che permetterà l'interpretazione di php sui file con estensione .html.
RemoveHandler .html
AddType application/x-httpd-php .php .html
Ora potete usare un semplice script php per includere altri file come:
<?php include('b.html'); ?>