Ability to use a single html that stands as an 'include' to another html page
Question
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?
3 answers
solution1
2 ACCPTED 2016-05-25 15:37:03
I think you have a few different options. With PHP you could do something like this:
<!DOCTYPE html>
<html>
<body>
<h1>Welcome to my home page!</h1>
<p>Some text.</p>
<p>Some more text.</p>
<?php include 'footer.php';?>
</body>
</html>
See this link .
With AngularJS you could use something like this:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<div ng-include="'myFile.htm'"></div>
</body>
</html>
See this link .
With just HTML5 you could try something like this:
<object name="foo" type="text/html" data="foo.inc"></object>
See this link .
Does that help answer your question?
solution2
2 2016-05-25 15:41:11
What you are asking is possible in differents ways:
frame and iframe
take a look at this two tags
- frame : http://www.w3schools.com/tags/tag_frame.asp
- iframe : http://www.w3schools.com/tags/tag_iframe.asp
I do not recommend this solution because "frame" is not supported in HTML5 and "iframe" is made to include other website in a website, not part of a website. You will not be able to add CSS/JS to code in "iframe" tag.
back end solution
Depending on what kind of website you are working on you can include other file. For exemple in php:
include('youcode.html');
HTML5 solution
You can also use the "object" tag :
<object width="100%" height="500px" data="snippet.html"></object>
this is probably your best choice, see : http://www.w3schools.com/html/html_object.asp
Enjoy :)
solution3
1 2016-05-25 15:32:51
This can't be done via HTML, you can either do a PHP include or use this W3 schools example:
http://www.w3schools.com/howto/howto_html_include.asp
PHP example template.html rename to template.php
<html>
<?php include template.php ?>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.