zoukankan      html  css  js  c++  java
  • 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文件就可以了。

    人生得意须尽欢,莫使金樽空对月.
  • 相关阅读:
    MySQL中的内置系统函数
    Mysql导出表结构及表数据 mysqldump用法
    MySQL事务处理案例演示
    mysql中int、bigint、smallint 和 tinyint的区别详细介绍
    mysql 获取上个月,这个月的第一天或最后一天
    ★MySQL一些很重要的SQL语句
    remix的使用
    nodejs部署智能合约的方法-web3 0.20版本
    js同步-异步-回调
    ganache与metamask
  • 原文地址:https://www.cnblogs.com/luojie-/p/12468939.html
Copyright © 2011-2022 走看看