This W3 Schools script is not a standard and upon looking at its source code, it relies on XHLHttpRequest objects (AJAX). AJAX requests will only work when the code is requested from a server over HTTP or HTTPS, so make sure when you test this code that you are running it on a server.
In addition, even if you get this working, the included file should not be an entire HTML document. It should just be a fragment that you intend to insert into a larger file. Since you are attempting to inject your header.html file into a div of index.html, you should only inject code that would be valid inside of a div, so change header.html to this:
<p id ="userName">username</p>
<p id ="time"></p>
<p id ="logcount">timeCounter</p>
<!-- You want the .js reference to come before your
attempt to use the code in the file and also
after any elements that the code will refer to. -->
<script src="scripts/userInfo.js"></script>
<script>dateTime();</script>
Videos
In my opinion the best solution uses jQuery:
a.html:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
b.html:
<p>This is my include file</p>
This method is a simple and clean solution to my problem.
The jQuery .load() documentation is here.
Expanding lolo's answer, here is a little more automation if you have to include a lot of files. Use this JS code:
$(function () {
var includes = $('[data-include]')
$.each(includes, function () {
var file = 'views/' + $(this).data('include') + '.html'
$(this).load(file)
})
})
And then to include something in the html:
<div data-include="header"></div>
<div data-include="footer"></div>
Which would include the file views/header.html and views/footer.html.
Method 1:
I think it would be best way to include an html content/file into another html file using jQuery.
You can simply include the jQuery.js and load the HTML file using $("#DivContent").load("yourFile.html");
For example
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#DivContent").load("another_file.html");
});
</script>
</head>
<body>
<div id="DivContent"></div>
</body>
</html>
Method 2:
There are no such tags available to include the file but there are some third party methods available like this:
<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<body>
<div w3-include-html="content.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
Method 3:
Some people also used server-side-includes (SSI):
<!--#include virtual="a.html" -->
Use <object> tag:
<object data="filename.html"></object>
You need to delegate your events beacouse w3school script uses ajax and adds new items to the dom
$('body').on('click','#leftDrop1',function() {
if ($('#sub1').css('display') == 'block') {
$('#sub1').hide()
} else {
$("#sub1").show()
}
})
$('body').on('click','#leftDrop2',function() {
if ($('#sub2').css('display') == 'block') {
$('#sub2').hide()
} else {
$("#sub2").show()
}
})
Now w3.includeHTML from w3.js allows a callback after html is loaded.
w3.includeHTML(function() {
$('#leftDrop1').on('click', function() {
if ($('#sub1').css('display') == 'block') {
$('#sub1').hide()
} else {
$("#sub1").show()
}
})
$('#leftDrop2').on('click', function() {
if ($('#sub2').css('display') == 'block') {
$('#sub2').hide()
} else {
$("#sub2").show()
}
})
});
Simple way would be to put the header part in a separate html file.
Now load this file in html code using jQuery load function like
$("#headerDiv").load("header.html")
Know that, this will require web server because load function sends a request to server.
Check out the code sample:
demo.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(function(){
$("#headerDiv").load("header.html");
});
</script>
</head>
<body>
<div id="headerDiv"></div>
<!-- Rest of the code -->
</body>
</html>
header.html
<div >
<a>something</a>
<a>something</a>
</div>
That is called HTML includes, and YES, it is possible
<div w3-include-HTML="content.html">My HTML include will go here.</div>
<script>
(function () {
myHTMLInclude();
function myHTMLInclude() {
var z, i, a, file, xhttp;
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
if (z[i].getAttribute("w3-include-html")) {
a = z[i].cloneNode(false);
file = z[i].getAttribute("w3-include-html");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
a.removeAttribute("w3-include-html");
a.innerHTML = xhttp.responseText;
z[i].parentNode.replaceChild(a, z[i]);
myHTMLInclude();
}
}
xhttp.open("GET", file, true);
xhttp.send();
return;
}
}
}
})();
</script>
NOTES
HTML doesn't have a simple include mechanism (except for frames like iframe, which have side effects).
A better solution would be to use Server-Side includes, which is the preferred way of adding common parts to your document, on the server, of course.