1

I have a client who develops some equipment with embedded web-servers that allow the end user to configure the device. The current interface for this doesn't match the bigger company 'Style Guide' and hence they've come to me to 'tart-it-up' substantially.

The problem is, that there is only 24K to fit in 7 web pages including JS, images and CSS. Plus the base firmware, only allows for HTML, ero, CSS and PNG, file formats.

Now, I've got most of the site done minus a few things, within this 24K but I really need to shave off as much data baggage as possible to give me capacity to include the images, and the final page. So literally every tiny Kb of data from a file is crucial.

I've done all the usual things like minification of all the files, but I'm still in need of trimming off more.

These has lead me to the following idea. Every page has the same footer:

<div class="footerContainer">
     Copyright &copy; <a href="http://url/"> Company</a> 2014. All rights reserved.
</div>

So I now want to place this in a separate html file and replace it with a single line of JS that then calls in the html snippet /.html file.

If the system allowed for external JS files I simply do a chunk of .js to replace a know div in the footer. But that's not possible. So, is there a way to write in JS, "insert external (html) file here"?

If this is concise enough it would at least trim off some of the size of each html page.

Key facts

24k max size

No JS files allowed or available

No external libraries

HTML minified already

Existing JS minified already

CSS minified already

No server side tech

Improve this question
8
  • you can use jquery.load() for that api.jquery.com/load Commented May 3, 2014 at 10:38
  • @Grumpy: jQuery, on its own, wouldn't fit in the space the OP says he has, much less alongside the content he says already barely fits. Commented May 3, 2014 at 10:39
  • why you want to insert html from external file in clint using js, why you don't include that partial html in server side? Commented May 3, 2014 at 10:39
  • Im not sure if javascript can read external files on its own without expansions like jQuery, but if it cant, you can create a js file with ur footer as a string variable and link the js file to all your pages and then just srt your foooter innerHtml as that string variable Commented May 3, 2014 at 10:41
  • code.google.com/p/htmlcompressor this may help. Commented May 3, 2014 at 11:01

1 Answer 1

Reset to default
3

If the embedded web server supports any form of server-side include, that would probably be the way to go.

If you really want to do it in JS, it's trivial to do and there's no need to read a separate file. In your shared JavaScript (I assume you have a JavaScript file shared between the pages):

var div = document.createElement('div');
div.className = 'footerContainer'; // <== Surely that class name could be shorter?
div.innerHTML = 'Copyright &copy; <a href="http://url/"> Company</a> 2014. All rights reserved.';
document.body.appendChild(div);

Or a bit smaller:

var d=document,f=d.createElement('div');
f.className='footerContainer';
f.innerHTML='Copyright &copy; <a href="http://url/"> Company</a> 2014. All rights reserved.';
d.body.appendChild(f);

(Strikeout above because you've said you can't use external JS files [that is one awful environment you're working in!], and of course repeating the above for each page is much larger than the relevant markup would be.)

The closest I can get in JavaScript to load a file (f.html), using the dreaded with construct, is slightly longer than the footer, unless the URL in the footer is really long (and this doesn't take into account the fact you're shortening class names):

<!-- The shortest I can get the inline JavaScript to insert a file -->
<script>with(new XMLHttpRequest){onload=function(){document.body.insertAdjacentHTML("beforeend",responseText)};open("GET","f.html",false);send()}</script>
<!-- Your footer, for comparison (scroll to the right to see how much longer the JavaScript is -->
<div class="footerContainer">Copyright &copy; <a href="http://url/"> Company</a> 2014. All rights reserved.</div>

A non-JS approach using a separate file would be an iframe:

<iframe src="footer.html"></iframe>

...where your HTML is in footer.html. You'll need to add some styling (in your CSS) for the iframe so it combines seamlessly with the page.

Improve this answer
Sign up to request clarification or add additional context in comments.

15 Comments

Plus trim off few characters by replacing var div with var d and document with another var :P
@PeteTNT: LOL, was just doing that. :-)
Hah and I was editing in to suggest to setting document as another var :)
@PhillHealey I think you are in some kind of web developer purgatory
@T.J.Crowder Thanks for the effort it's much appreciated. I may be able to use it elsewhere to trim a tiny bit off.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.