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进行操作。

转载于:https://www.cnblogs.com/xguoz/p/10136573.html