Since my first answer wasn't covering the interested question I decided to fully edit and replace the answer. Here we go..
Solutions
1 - JQuery load() function
<!-- LOAD JQUERY -->
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<!-- "INCLUDE" external files with code -->
<script>
$("#header").load("header.html");
$("#footer").load("footer.html");
</script>
2 - NPM gulp package which lets you includes file and pass some parameters/values
https://www.npmjs.com/package/gulp-file-include
<!DOCTYPE html>
<html>
<body>
@@include('./header.html')
@@include('./main.html')
</body>
</html>
an example of a gulp task:
var fileinclude = require('gulp-file-include'),
gulp = require('gulp');
gulp.task('html', function() {
return gulp.src(['./src/html/views/*.html'])
.pipe(fileInclude({
prefix: '@@',
basepath: 'src/html'
}))
.pipe(gulp.dest('./build'));
});
3 - pure javascript via document.write function and including script with it via src
<script type="text/javascript" src="header.js"></script>
4 - pure ajax request that requests additional data and places it where it should be placed on the page
5 - SSI (Server Side Include), as I mentioned it in comment
6 - iframes (not the best way, though)
7 - asp/jsp server script include (as alternative to php server script include)
More info here:
Common Header / Footer with static HTML
Make header and footer files to be included in multiple html pages
Hopefully you can find the best way that will suit your needs from one of this.
