Question

我有一个客户开发了一些带有嵌入式Web服务器的设备，允许最终用户配置设备。目前的界面并不适合大公司的风格指南＆＃39;因此，他们来找我“开始”＃39; tart-it-up＆＃39;基本上

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

现在，我已经完成了大部分网站减去了一些事情，在这24K内，但我真的需要尽可能多地减少数据包，以便能够包含图像和最终页面。所以文件中的每一小块数据都是至关重要的。

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

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

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

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

如果系统允许外部js文件，我只需要执行一大块.js来替换页脚中的已知div。但那不可能。那么，有没有办法用js写，＆＃34;在这里插入外部（html）文件＆＃34; ????

如果这很简洁，它至少会削减每个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 © <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 © <a href="http://url/"> Company</a> 2014. All rights reserved.'; d.body.appendChild(f);

（Strikeout上面是因为你已经说过你不能使用外部JS文件了[这是你工作的一个糟糕的环境] ！]，当然，每个页面重复上述内容要比相关标记大得多。）

我可以使用可怕的f.html构造在JavaScript中加入文件（with），但是距离页脚稍长，除非页脚中的网址很长（这并没有考虑到你缩短类名的事实）：

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

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

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

通过JS将HTML插入HTML页面

1 个答案: