Een ander HTML-bestand opnemen in een HTML-bestand

Ik heb 2 HTML bestanden, stel a.html en b.html. In a.html wil ik b.html opnemen.

In JSF kan ik dat zo doen:

<ui:include src="b.xhtml" />

Dat betekent dat ik in a.xhtml bestand, b.xhtml kan opnemen.

Hoe kunnen we dat doen in *.html bestand?

BalusC
Bewerkte vraag 24ste1 januari 2012 в 2:59
Programmering
html include
24ste1 januari 2012 в 2:51
11 views
Oplossing

Naar mijn mening is jQuery de beste oplossing:

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>

Deze methode is een eenvoudige en schone oplossing voor mijn probleem.

De jQuery .load() documentatie is hier.

SharpC
Bewerkt antwoord 4de4 november 2016 в 11:03
Commentaren (20)

Mijn oplossing is vergelijkbaar met die van lolo hierboven. Ik voeg de HTML-code echter in via JavaScript's document.write in plaats van jQuery te gebruiken:

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

De reden voor mij tegen het gebruik van jQuery is dat jQuery.js is ~90kb in grootte, en ik wil de hoeveelheid gegevens te laden zo klein mogelijk te houden.

Om het correct ge-escaped JavaScript bestand te krijgen zonder veel werk, kun je het volgende sed commando gebruiken:

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

Of gebruik gewoon het volgende handige bash script, gepubliceerd als een Gist op Github, dat al het nodige werk automatiseert, door b.html om te zetten in b.js: https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6

Credits naar Greg Minshall voor het verbeterde sed commando dat ook back slashes en single quotes escaped, waar mijn originele sed commando geen rekening mee hield.

Als alternatief voor browsers die template literals ondersteunen, werkt het volgende ook:

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>

`);
Chris Magnuson
Bewerkt antwoord 21ste0 oktober 2019 в 3:24
Commentaren (10)

Als alternatief, als u toegang hebt tot het .htaccess bestand op uw server, kunt u een eenvoudige richtlijn toevoegen die php zal toelaten om geïnterpreteerd te worden op bestanden die eindigen op .html extensie.

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

Nu kunt u een eenvoudig php script gebruiken om andere bestanden op te nemen zoals:

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