DeathKing - 1 year ago 34
Javascript Question

# Ability to use a single html that stands as an 'include' to another html page

I was searching around for an answer to this question but I can't seem to find the exact "words" or "phrases" to find relevant answers.

My question is, is it possible to have an ability to use a single html that stands as an "include" to another html page?

Example: Being able to use one file containing CSS styles so the same file can appear on every page of the site automatically that I include it on.

I made a template that has an extension of

.html
that contains only my header and footer for the whole theme of the site. Normally, I would copy and paste the contents of these templates to each new html page then add in the unique body content for that page.

What I would like to do is make a template that has an extension of
.html
containing only my header and footer so I can do something like
include template.html
which automatically would put the content of the
template.html
page on each page so I don't have to copy and paste each time. I am finding it harder and harder to update/maintain each page of the site that contains the header and footer script because I have to find and replace each instance of those scripts when changes are made and must be propagated throughout the site.

I know that html does not actually have an
include
function but I think there should be a way around this through other languages such as PHP or even JavaScript? I just am curious if its possible and if so, how?

I think you have a few different options. With PHP you could do something like this:

    <!DOCTYPE html>
<html>
<body>

<p>Some text.</p>
<p>Some more text.</p>
<?php include 'footer.php';?>

</body>
</html>


With AngularJS you could use something like this:

    <!DOCTYPE html>
<html>
<body ng-app="">
<div ng-include="'myFile.htm'"></div>
</body>
</html>


With just HTML5 you could try something like this:

    <object name="foo" type="text/html" data="foo.inc"></object>