html页面引入公共的页首和导航栏

顺晟科技

2022-09-15 21:14:50

331

当网站页面数量多达几十上百时，制作一个头部的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文件就可以了。

上一篇：HTML中include file的下一篇：html css 仿微信底部自己定义

网站建设

Html

html页面引入公共的页首和导航栏

标签定义及使用说明