Simple HTML includes with Javascript

This blog is all static pages. That means that to edit, say, the header, I need to edit each post saved as a separate HTML file. One would think that this problem would have been solved natively and elegantly a long time ago. But, in order to use a common header, sidebar, etc., there are all kinds of ugly hacks, many of which are described here. I want to do this without PHP, jQuery, or another external js library, to reduce security risks and to speed loading (jQuery is about 80MB). So, how about this:

HTML on the web page:

<div>
&script language="JavaScript" src="sample.js"><:/script>
</div>

The javascript is this (simplified):

document.write('<div class="header" style="background: url(\'sunset_2018.jpg\') no-repeat center;">\
<h4>No Hair Blog</h4>\
</div>\
');

And the result is:

This uses the common document.write() which is part of all browsers and javascript libraries. Se the above link for the code.

I kept trying to use <OBJECT>: to avoid javascript but that doesn't work as the parent page's css is not included.

Oh, by the way, why don't <pre> and <code> tags still not work for listing HTML code? You still have to replace the < and > or use the <textarea> tag.

Posted by Gordon, No Hair Blog, Apr 20, 2018

© nohair.net and the author



For comments, corrections, and addenda, email: gordon[AT]nohair.net

Blog | Entries | Tags | Home