In this tutorial, we shall learn to include another HTML file in an HTML file.
Various methods are **ailable to include another HTML file in an HTML file. Let us quickly go through the techniques that h**e support on the web.
Using JQuery load to include an HTML file
In this section, we shall check how to use JQuery’s load method to include an HTML file.
Users can follow the syntax below to use this method.
Syntax
$(wrapper).load(htmlfile);
The wrapper appends the new HTML file that jQuery loads.
Parameters
Example
The program requires two HTML files. One is the main HTML file to load the new HTML file. Next is the new HTML file. Place both files in the exact location.
Define a wrapper DOM element in the main HTML file to append the new HTML file. Using the jQuery load technique load the new HTML file and set it inside the wrapper DOM.
Inner HTML file
<html> <body> <h3>This is an HTML page from same directory</h3> </body> </html>
Main HTML file
<html> <head> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(function() { $("#includeHtml").load("result.html"); }); </script> </head> <body> <h2>Program to include another HTML file in this HTML using <i>JQuery load</i></h2> <div id="includeHtml"></div> </body> </html>
Output
Using w3-include-html attribute to include an HTML file
In this section, let us check how to use the w3-include-html attribute to include an HTML file.
Users can follow the syntax below to use this method.
Syntax
<div w3-include-html="filename.html"></div>
Includes a wrapper DOM with the attribute w3-include-html h**ing the new HTML file name as the value.
//Read the attribute fileName = domEl.getAttribute("w3-include-html"); //Make XMLHttpRequest with the attribute value xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function() { //If the request is successful, load the new HTML. Else throw 404 error and try again if (this.readyState == 4) { if (this.status == 200) {domEl.innerHTML = this.responseText;} if (this.status == 404) {domEl.innerHTML = "Error 404";} /* Remove the attribute and invoke the function again*/ domEl.removeAttribute("w3-include-html"); addHTML(); } xmlHttp.open("GET", fileName, true); xmlHttp.send();
The syntax reads the w3-include-html attribute value and loads the new HTML with a XMLHttpRequest.
Example
In this example, create a new HTML and a default HTML file. The default HTML file contains a div element with attribute w3-include-html which contains the new HTML file name.
The program reads the w3-include-html attribute value, makes an XMLHttpRequest with the file name, and loads the file.
A New HTML file renders inside the w3-include-html wrapper DOM after a successful file load. Else user gets an error message, and the program loads the file again.
Inner HTML file
<html> <body> <header><b>HTML 2 HEADER</b></header> <div style="height: 100px;"></div> <footer><b>HTML 2 FOOTER</b></footer> </body> </html>
Main HTML file
<html> <body> <h2>Program to include another HTML file in this HTML using <i>w3-include-html</i></h2> <div w3-include-html="result.html"></div> <script> function addHTML() { var el, i, domEl, fileName, xmlHttp; /*Iterate all DOM*/ el = document.getElementsByTagName("*"); for (i = 0; i < el.length; i++) { domEl = el[i]; /*find the element h**ing w3-include-html attribute*/ fileName = domEl.getAttribute("w3-include-html"); if (fileName) { /*http request with attribute value as file name*/ xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) { domEl.innerHTML = this.responseText; } if (this.status == 404) { domEl.innerHTML = "Page not found."; } /* Remove the attribute and invoke the function again*/ domEl.removeAttribute("w3-include-html"); addHTML(); } } xmlHttp.open("GET", fileName, true); xmlHttp.send(); /*function ends*/ return; } } } addHTML(); </script> </body> </html>
Output
Using the htmlinclude library to include an HTML file
In this section, we shall check how to use the htmlinclude library to include an HTML file.
Users can follow the syntax below to use this method.
Syntax
<script src="library.js"></script>
The syntax adds the j**ascript library file URL.
<include src="./result.html"></include>
The include tag src contains the new HTML file name.
//Getting include attribute value let includes = document.getElementsByTagName('include'); for(var i=0; i<includes.length; i++){ let include = includes[i]; //Loading include src value load_file(includes[i].attributes.src.value, function(text){ include.insertAdjacentHTML('afterend', text); include.remove(); }); } function load_file(filename, callback) { fetch(filename).then(response => response.text()).then(text => callback(text)); }
The syntax loads the source of the tag "include" using the fetch method.
Example
In this example, the htmlinclude library is **ailable in the header. Creating an include tag with the new file name as the src attribute value.
Coming to the script, loading the include tag src value with the fetch method. If you get any error using fetch, try to get help from nodejs or any other program IDE.
Inner HTML file
<html> <body> <b>htmlinclude library included this HTML file</b> </body> </html>
Main HTML file
<html> <head> <script src="https://unpkg.com/htmlincludejs"></script> </head> <body> <h2>Program to include another HTML file in this HTML using <i>htmlinclude library</i></h2> <include src="./result.html"></include> <script> let includes = document.getElementsByTagName('include'); for (var i = 0; i < includes.length; i++) { let include = includes[i]; load_file(includes[i].attributes.src.value, function(text) { include.insertAdjacentHTML('afterend', text); include.remove(); }); } function load_file(filename, callback) { fetch(filename).then(response => response.text()).then(text => callback(text)); } </script> </body> </html>
Output
Using an iframe to include an HTML file
In this section, let us check how to use an iframe to include an HTML file.
Users can follow the syntax below to use this method.
Syntax
<iframe src="new.html"></iframe>
The iframe tag includes the new HTML file name in the src.
Example
In this example, create a sample HTML file to include and main HTML file. The approach adds an iframe with the new HTML file name as the source value in the new HTML body.
The iframe loads the new HTML content inside the main HTML file.
Inner HTML file
<html> <body> <div style="background-color: skyblue;">iframe included this HTML file</div> </body> </html>
Main HTML file
<html> <head> <h2>Program to include another HTML file in this HTML using <i>iframe</i></h2> <style> iframe[iframetag] { border: none; } </style> </head> <body> <div id="iframeDiv"> <iframe src="result.html" iframetag></iframe> </div> </body> </html>
Output
This tutorial introduced four methods to include a new HTML file in an HTML file. The iframe method is simple to implement. Users can choose the jQuery load method if they need a jQuery method.
