通过JS将HTML插入HTML页面

Question

我有一位客户开发了一些带有嵌入式Web服务器的设备，允许最终用户配置设备。目前这个界面与大公司的“风格指南”不符，因此他们已经找到了我大幅提高的标准。

问题是，只有24K适合7个网页，包括JS，图像和CSS。加上基本固件，只允许html，ero，css和png，文件格式。

现在，我已经完成了大部分网站减去一些东西，在这24K内，但我真的需要削减尽可能多的数据行李，以使我能够包括图像和最终页面。所以从字面上看，文件中的每一个微小的数据都是至关重要的。

我已经完成了所有文件缩小的所有常见操作，但是我仍然需要修剪更多。

这些让我想到了以下想法。每个页面都有相同的页脚：

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

所以我现在希望把这种在一个单独的HTML文件，并与JS的sinle行然后调用在HTML片段/.html文件将其替换。

如果系统允许外部js文件，我只需做一大堆.js来替换页脚中的知道div。但那不可能。那么，有没有办法在js中写入，“在这里插入外部（html）文件”？

如果这足够简洁，至少会裁掉每个html页面的一些大小。

* * *主要事实* * *

24K最大尺寸

允许或没有可用的.js文件

无需外部库

的Html已经过压缩

现存的JS已经缩小了

CSS已经过压缩

没有服务器端技术

Answer 1

如果嵌入式Web服务器支持任何形式的服务器端的包括，这很可能是要走的路。

如果你真的想在JS中做到这一点，这是微不足道的，没有必要读一个单独的文件。 在共享的JavaScript（我假设你有网页之间共享的JavaScript文件）：

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); 

还是小了些：

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); 

（以上三振出局，因为你说过你不使用外部JS文件[这是一个糟糕的环境！]，当然，重复上述每个页面比相关的标记要大得多。）

我可以在JavaScript中去加载一个文件（f.html），使用可怕的with结构最接近的，是略长于页脚，除非在页脚中的URL是真的长（这没有按” t拍摄到的事实你缩短类名）：使用一个单独的文件将是一个iframe

<!-- 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> 

非JS方法：

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

...您的HTML位于footer.html。您需要为iframe添加一些样式（在CSS中），以便与页面无缝结合。