通過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中），以便與頁面無縫結合。