Mám 2 HTML súbory, predpokladám a.html
a b.html
. Do súboru a.html
chcem zahrnúť súbor b.html
.
V JSF to môžem urobiť takto:
<ui:include src="b.xhtml" />
To znamená, že do súboru a.xhtml
môžem zahrnúť súbor b.xhtml
.
Ako to môžeme urobiť v súbore *.html
?
Podľa môjho názoru najlepšie riešenie používa 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>
Táto metóda je jednoduchým a čistým riešením môjho problému.
Dokumentácia k metóde jQuery .load()
je tu.
Moje riešenie je podobné riešeniu lolo vyššie. Avšak namiesto jQuery vkladám HTML kód cez JavaScript'document.write:
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>\
\
');
Dôvod, prečo som proti použitiu jQuery, je ten, že jQuery.js má veľkosť ~90 kb a ja chcem, aby sa načítavalo čo najmenej dát.
Aby ste získali správne escapovaný súbor JavaScript bez väčšej práce, môžete použiť nasledujúci príkaz sed:
sed 's/\\/\\\\/g;s/^.*$/&\\/g;s/'\''/\\'\''/g' b.html > escapedB.html
Alebo stačí použiť nasledujúci praktický skript bash uverejnený ako Gist na Githube, ktorý automatizuje všetku potrebnú prácu a konvertuje b.html
na b.js
:
https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6
Za vylepšený príkaz sed, ktorý escapuje aj spätné lomky a jednoduché úvodzovky, čo môj pôvodný príkaz sed nezohľadňoval, patrí vďaka Gregovi Minshallovi.
Alternatívne pre prehliadače, ktoré podporujú template literals, funguje aj nasledujúci postup:
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>
`);
Ak máte prístup k súboru .htaccess na serveri, môžete pridať jednoduchú smernicu, ktorá umožní interpretáciu php v súboroch s koncovkou .html.
RemoveHandler .html
AddType application/x-httpd-php .php .html
Teraz môžete použiť jednoduchý skript php na zahrnutie ďalších súborov, ako napr:
<?php include('b.html'); ?>