Dołączanie innego pliku HTML do pliku HTML

Moim zdaniem najlepszym rozwiązaniem jest użycie 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>

Ta metoda jest prostym i czystym rozwiązaniem mojego problemu.

Dokumentacja jQuery .load() jest tutaj.

Moje rozwiązanie jest podobne do tego z lolo powyżej. Jednakże, wstawiam kod HTML poprzez JavaScript's document.write zamiast używać jQuery:

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>\
\
');

Powodem dla mnie przeciwko używaniu jQuery jest to, że jQuery.js ma rozmiar ~90kb, a ja chcę utrzymać ilość danych do załadowania tak małą, jak to tylko możliwe.

Aby uzyskać prawidłowo wydostający się plik JavaScript bez większego wysiłku, możesz użyć następującego polecenia sed:

sed 's/\\/\\\\/g;s/^.*$/&\\/g;s/'\''/\\'\''/g' b.html > escapedB.html

Lub po prostu użyj następującego poręcznego skryptu bash opublikowanego jako Gist na Githubie, który zautomatyzuje całą niezbędną pracę, konwertując b.html na b.js: https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6

Credits to Greg Minshall for the improved sed command that also escapes back slashes and single quotes, which my original sed command did not consider.

Alternatywnie, dla przeglądarek, które obsługują template literals, działa również poniższe rozwiązanie:

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>

`);

Alternatywnie, jeśli masz dostęp do pliku .htaccess na swoim serwerze, możesz dodać prostą dyrektywę, która pozwoli na interpretację php na plikach kończących się rozszerzeniem .html.

RemoveHandler .html
AddType application/x-httpd-php .php .html

Teraz możesz użyć prostego skryptu php, aby dołączyć inne pliki, takie jak:

<?php include('b.html'); ?>