Javascript 通过JS将HTML插入HTML页面

我有一个客户，他开发了一些带有嵌入式Web服务器的设备，允许最终用户配置设备。目前的界面与大公司的“风格指南”不匹配，因此他们来找我“启动”了

问题是，包括js、图像和css在内的7个网页只有24K可容纳。加上基本固件，只允许html、ero、css和png文件格式

现在，我已经完成了网站的大部分工作，只做了几件事，在这24K的范围内，但我真的需要尽可能地减少数据负担，以使我能够包含图像和最终页面。因此，文件中每一个微小的kb数据都是至关重要的

我做了所有通常的事情，比如缩小所有的文件，但我仍然需要修剪更多

这些使我产生了以下想法。每一页都有相同的页脚：

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

版权及副本；2014版权所有。

所以我现在想把它放在一个单独的html文件中，用一行js替换它，然后调用html snippet/.html文件

如果系统允许外部js文件，我只需执行一个.js块来替换页脚中的know div。但这是不可能的。那么，有没有一种方法可以用js写“在这里插入外部（html）文件”

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

***关键事实***

24k最大尺寸

不允许或不可用.js文件

没有外部库

Html已经缩小

现有JS已缩小

CSS已经缩小了

---

没有服务器端技术

如果嵌入式web服务器支持任何形式的服务器端包含，那可能就是最好的选择

如果您真的想在JS中实现它，那么它非常简单，并且不需要读取单独的文件。在共享JavaScript中（我假设您在页面之间共享了一个JavaScript文件）：

使用单独文件的非JS方法将是

iframe

：

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

---

…HTML在

footer.HTML

中的位置。您需要为

iframe

添加一些样式（在CSS中），使其与页面无缝结合。

您可以使用jquery.load（）来处理@Grumpy:jquery本身不适合OP所说的空间的问题，更不用说他所说的内容了。为什么你想用js在clint中插入外部文件中的html，为什么不在服务器端包含部分html？我不确定javascript是否可以在没有像jQuery这样的扩展的情况下自己读取外部文件，但如果它不能，您可以创建一个js文件，将ur footer作为字符串变量，并将js文件链接到您的所有页面，然后将您的foooter innerHtml作为该字符串变量，这可能会有所帮助。此外，还可以使用var d替换var div，并使用另一个var替换文档，从而减少几个字符：P@PeteTNT：LOL，我就是这么做的。：-）哈和我在编辑中建议将文档设置为另一个变量：）@PhillHealey我想你是在某种web开发人员中purgatory@T.J.Crowder谢谢你的努力，非常感谢。我也许可以在其他地方用它来修剪一点。

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

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

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