Zahrnutie iného súboru HTML do súboru HTML

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?

Riešenie

Podľa môjho názoru najlepšie riešenie používa jQuery:

a.html:



    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("b.html"); 
    });
    </script> 



     <div id="includedContent"></div>

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.

Komentáre (20)

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:



  <h1>Put your HTML content before insertion of b.js.</h1>
      ...

  <script src="b.js"></script>

      ...

  <p>And whatever content you want afterwards.</p>

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>

`);
Komentáre (10)

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'); ?>
Komentáre (5)