Question

通过 JS 将 HTML 插入到 HTML 页面中

2014-05-03

1856

javascript html

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

问题是，只有 24K 的空间来容纳 7 个网页，包括 JS、图像和 CSS。此外，基本固件只允许 HTML、ero、CSS 和 PNG 文件格式。

现在，除了一些内容外，我已经完成了网站的大部分工作，在 24K 的空间内，但我真的需要尽可能地减少数据负担，以便我能够包含图像和最终页面。因此，文件中的每一小 KB 数据都至关重要。

我已经做了所有常规的事情，例如缩小所有文件，但我仍然需要削减更多。

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

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

因此，我现在想将其放在单独的 html 文件中，并用一行 JS 替换它，然后在 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 真的很长（这还没有考虑到您正在缩短类名的事实）：

<!-- 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 中），以便它与页面无缝结合。