In this post, we will learn how to include another HTML file in HTML file. If you want to show the content of another HTML file in the HTML file. So how we can do this, we will learn in this post. 


How To Include Another HTML File In HTML File ?


Include Another HTML File In HTML File 

To include another HTML file in HTML file, we use JavaScript. To include HTML file we use  include-html  attribute. Now we create an HTML file and name it included.html. We will include this file in another HTML file.


included.html file looks like this

<h3>Hurray!</h3>

<p>I'm included!.</p> code-box



Now we write this JavaScript code, which helps to include the file.


<script>

function includeHTML() {

// Create Variables

var z, i, elmnt, file, xhttp;


/*loop through a collection of all HTML elements:*/

z = document.getElementsByTagName("*");


// Run for loop and make http request to include file

for (i = 0; i < z.length; i++) {

elmnt = z[i];


/*search for elements with include-html atrribute:*/

file = elmnt.getAttribute("include-html");


if (file) {

/*make an HTTP request using the attribute value as the file name:*/


xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4) {

if (this.status == 200) {

elmnt.innerHTML = this.responseText;

}

if (this.status == 404) {

elmnt.innerHTML = "Page not found.";

}


/*remove the attribute, and call this function once more:*/

elmnt.removeAttribute("include-html");

includeHTML();

}

}

xhttp.open("GET", file, true);

xhttp.send();


/*exit the function:*/

return;

}

}

};

</script> code-box


Complete Code Using JavaScript

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How To Include Another HTML File In HTML File ?</title>
</head>
<body>

<div include-html="included.html"></div>

<!-- JavaScript code -->
<script>

function includeHTML() {

// Create Variables
var z, i, elmnt, file, xhttp;

/*loop through a collection of all HTML elements:*/
z = document.getElementsByTagName("*");

// Run for loop and make http request to include file
for (i = 0; i < z.length; i++) {
elmnt = z[i];

/*search for elements with include-html atrribute:*/
file = elmnt.getAttribute("include-html");
if (file) {

/*make an HTTP request using the attribute value as the file name:*/
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {
elmnt.innerHTML = this.responseText;
}

if (this.status == 404) {
elmnt.innerHTML = "Page not found.";
}

/*remove the attribute, and call this function once more:*/
elmnt.removeAttribute("include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/*exit the function:*/
return;
}
}
};

</script>

<!-- Call the function -->
<script>
includeHTML();
</script>
</body>
</html> code-box


If you are having trouble understanding the code of JavaScript, then you can also use the code of jQuery, which is given below. Make sure to include the jQuery file before using the jQuery code, otherwise the code will not work.


<!-- jQuery CDN -->

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<!-- jQuery code -->

<script>

$(function() {


// Get all element with include-html attribute

$("*[include-html]").each(function() {

var t = $(this).attr("include-html"),


// this id use to show file after ajax request

u = this.id;

jQuery.ajax({

url: t,

success: function(t) {


//showing file

$("#" + u).html(t)

},


//on error this function call

error: function(n, c, i) {

var s = n.status + ": " + n.statusText;

$("#" + u).html(t + "-" + s)

}

})

})

});

</script> code-box


Complete Code Using jQuery


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How To Include Another HTML File In HTML File ?</title>
</head>
<body>

<!-- If we include two or more HTML file, in this case id attribute helps to show file content separately -->
<div include-html="included.html" id="included_file"></div>

<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<!-- jQuery code -->
<script>
$(function() {
$("*[include-html]").each(function() {
var t = $(this).attr("include-html"),
u = this.id;
jQuery.ajax({
url: t,
success: function(t) {
$("#" + u).html(t)
},

error: function(n, c, i) {
var s = n.status + ": " + n.statusText;
$("#" + u).html(t + "-" + s)
}
})
})
});

</script>

<!-- Call the function -->
<script>
includeHTML();
</script>

</body>
</html> code-box



Summary

In this post we learned how to include another HTML file in HTML file. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post