在写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>");

这样引入是没有外层那些标签的。如下:

html 提取 公用部分-编程知识网

至于有事件,可以直接获取DOM进行操作。