html页面引入公共的页首和导航栏
当网站页面数量多达几十上百时,制作一个头部的html页面和一个尾部的html页面将会省去很多的麻烦事,比如更改头部的样式时,不必在每个页面中全改一遍,方便了代码的维护,能减轻很多的工作量。
这几天修改公司官网的时候,被领导要求改变头部导航中的一些内容,但是我发现如果要改内容,所有页面的<header>内容都要改,几百个页面如果一个一个改太浪费时间和精力。于是我想到,之前用ASP.NET时里面有母版页的功能,那现在可不可以通过类似的方法,实现不同子页面链接同一个网页头部。
经过查阅各大博客网站,我发现了<iframe>元素。
标签定义及使用说明
-
- <iframe> 标签规定一个内联框架。
- 一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
例如我做了头部文件head.html,在index.html文件中链接时,只需在该页面的开头(<body>后面)增加以下代码:
<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src=”head.html” height=“auto” width="100%"> <p>您的浏览器不支持 iframe 标签。</p> </iframe>
但是当我把做好的头部文件链接到首页进行测试时,却发现在首页无法正常显示头部的导航下拉栏,研究了很久,试了网上的各种办法都无法成功,所以我换了方法,改用js的方式链入。
我将head.html转换成head.js(我用的是站长工具在线转换格式工具),然后直接在index.html文件的开头调用js代码:
1
|
<script type= "text/javascript" src= "head.js" ></script> |
采用js调用的方法测试,首页成功和头部文件契合在一起,之后将所有页面都链入同一个头部文件,再次改动头部的内容或者导航时,只需要改一个head.js文件就可以了。
人生得意须尽欢,莫使金樽空对月.