html 提取 公用部分

在寫HTML時，總會遇到一些公用部分，如果每個頁面都寫那就很麻煩，並且代碼量大大增加。

網上查詢了幾種方法：

1、es6 的 embed 標簽。

<embed src="header.html" type="text/html">

2、使用iframe。

<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src="header.html" height="auto" width="100%"></iframe>

3、使用object。

<object style="border:0px" type="text/x-scriptlet" data="header.html" width=100% height=auto></object>

這幾種都能插入，但是實際插入和iframe一樣，還是有最外層的html，header，body等外層元素。

4、將HTML轉化為js，然后引入js 文件。工具網址：http://tool.chinaz.com/Tools/Html_Js.aspx

這樣插入的就是只有 轉化的HTML部分。

比如：

footer.html 

<footer>
  <div>版權信息版權信息版權信息版權信息版權信息</div>
</footer>

轉化后 footer.js

document.writeln("<footer>");
document.writeln("  <div>版權信息版權信息版權信息版權信息版權信息</div>");
document.writeln("</footer>");

這樣引入是沒有外層那些標簽的。如下：

 

 

至於有事件，可以直接獲取DOM進行操作。