Include one HTML file into other HTML file
We have different ways to include one html file into other html page, using
1. <frame>
2. <iframe>
3. <java script>. we have different ways in java script.
if we use <frame> and <iframe> to include one html file into other html file, that web page shows border lines for each html file and it look like separate pages.
Here is the simple way to include one html file into other html file by using javascript.
Using <frame>:
Here I taken 4 HTML files
header.html, body.html, footer.html
I included above three html files into home.html
<html>
<frameset rows="50px,150px,50px">
<frame src="header.html"/>
<frame src="body.html"/>
<frame src="footer.html"/>
</frameset>
</html>
Output for above example:
Using javascript:
Here I taken 3 html files: header.html, body.html, footer.html
I included header.html and footer.html files into body.html file.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Above link is required
Javascript code for include html file
<script>
$(function(){
$("#headerContent").load("header.html");
$("#footerContent").load("footer.html");
});
</script>
<div id="headerContent"></div>
<div id="footerContent"></div>
Header.html
<html>
<body>
<h1>Welcome to Hyderabad</h1>
<h3> HOME | ABOUTUS | SERVICES | VISIT PLACES | CAREER | CONTACT </h3>
</body>
</html>
Footer.html
<html>
<body>
<h1>Thank you, visit again</h1>
</body>
</html>
Body.html
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
$("#headerContent").load("header.html");
$("#footerContent").load("footer.html");
});
</script>
</head>
<body>
<div id="headerContent"></div>
<h1>Tourist Places</h1>
<p>1. Charminar</p>
<p>2. Hussain sagar</p>
<p>3. Birla mandir</p>
<p>4. Ramoji film city</p>
<p>5. Golconda fort</p>
<div id="footerContent"></div>
</body>
</html>
Output for above example:
