1

Is there a way to embed the HTML from a file into another file? It would be useful for making headers or footers, not needing to paste the same code in every file.

kyr
  • 221
  • 2
  • 11
  • 1
    Use php include for that. – Vikas Sangle Jan 18 '14 at 13:06
  • What serverside language do u use? – Zword Jan 18 '14 at 13:07
  • @VikasSangle but is there a way to do it without PHP? – kyr Jan 18 '14 at 13:07
  • @kyr You can do it using ajax – Zword Jan 18 '14 at 13:08
  • 1
    Use jquery http://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file – Andrei Zhamoida Jan 18 '14 at 13:10
  • @kyr: If you are simply looking for partial HTML pages to be put together do it server side with what ever technology you use, php, .NET, Nodesjs, etc.. Using ajax in that case is redundant and adding extra server calls you don't need. Only use Ajax if you have dynamic content to serve or if your pages are located on different domains, etc.. otherwise you are just making unnecessary server calls for no reason at all. – Nope Jan 18 '14 at 16:20

4 Answers4

2

You can call them by using jQuery code, Insert it into your webpage head.

<head>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>     

<script> 
 $(function(){
  $("#includedContent").load("/path/to/filename.html"); 
  });
</script> 

</head>

And You can show it anywhere in your webpage by inserting

 <div id="includedContent"></div>
user2997826
  • 275
  • 1
  • 2
  • 11
1

This works with php:

<?php 
    include("header.html");
?>
<p>Here you can write your text</p>
<?php
    include("footer.html");
?>

Thats the simplest working

Miracle Johnson
  • 637
  • 2
  • 13
  • 25
1

If you don't want to use php, you can combine grunt with a twig generator, you will have the power of Twig (example: includes, layout inheritence, etc.) in your html pages.

Then with grunt build you will generate a dist folder with all the finals html pages.

Example of generator: https://github.com/polem/generator-gruig

Tib
  • 2,362
  • 1
  • 22
  • 42
0

You may want to consider using Master pages as in asp.net or else use iframes where the header, footer and iframe reside on the parent and the content is loaded into the child iframe.

Chris Serrao
  • 105
  • 1
  • 12