问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

请问前端大神，html如何引入另一个html，写了一个导航栏想在多个页面中如何重复使用？

头像
zsj0310
    631410

    写了一个头部导航栏的html
    想在多个html页面中引用，请问怎么操作？
    网上找了用<iframe>标签 实际效果并不好 ， 导航栏中按钮下拉菜单无法完全显示
    请问大牛们平时开发中怎么处理这个的

    如图 ：
    图片描述

    htmljavascriptcsshtml5
    阅读 37.1k
    19 个回答
    得票最新
    头像
    dongzhe3917875
      1.5k2210

      可以使用html的import这个功能
      通过声明 <link rel="import"> 来在页面中包含一个导入
      具体可以看教程
      可以向下面这样使用
      warning.html

      <div class="warning">
  <style scoped>
    h3 {
      color: red;
    }
  </style>
  <h3>Warning!</h3>
  <p>This page is under construction</p>
</div>

<div class="outdated">
  <h3>Heads up!</h3>
  <p>This content may be out of date</p>
</div>

      导入

      <head>
  <link rel="import" href="warnings.html">
</head>
<body>
  ...
  <script>
    var link = document.querySelector('link[rel="import"]');
    var content = link.import;

    // 从 warning.html 的文档中获取 DOM。
    var el = content.querySelector('.warning');

    document.body.appendChild(el.cloneNode(true));
  </script>
</body>
      头像
      雯子
        8012510

        1、可以用构建工具拼接，例如gulp， fis，
        我之前用过gulp，大概是这样的

        var headerfooter = require('gulp-headerfooter');

gulp.task("html", function() {
  return gulp.src("src/template/*.html")
    .pipe(headerfooter.header('src/headerfooter/header.html'))
    .pipe(headerfooter.footer('src/headerfooter/footer.html'))
    .pipe(gulp.dest("templates/purchase"))
})

        更详细的可以去我的github上看一下

        2、用后台模板来拼接，例如php，django等

        3、可以用一些前端模板来做，例如我用的就是handlebars，你先用handlebars写好公共部分，然后再在js里用Handlebars.compile插入进来

        如果你不想在页面加载完后再用js插入的话，建议使用前两者

        头像
        Quiet
          37433045

          这种情况一般都需要上构建工具，我是用gulp+jade实现的

          头像
          zonxin
            12.1k2632

            能想到的只有两种解决方案：

            1. 后台拼接页面，可以用PHP，jsp或是nodejs模板引擎。

            2. 使用Ajax做单页面应用（不过这个似乎不符合你的要求）

            头像
            Emrys
              1.4k4416

              你可以用shtml include的，不过一般都是在程序语言组装好的，而且每个语言都有各自的叫法，不过都是一个意思，
              比如aspx就是用户控件啊
              还有一种就是用ajax加载，不过这个不合常理，只不过能实现而已。

              头像
              水中熊
                182

                你可以考虑把头部导航栏的html 以字符串的形式保存到一个全局变量里，然后在需要的地方通过js动态写入进去。

                头像
                Oo蛋茶色oO
                  1
                  新手上路，请多包涵

                  用react框架轻松实现。

                  头像
                  小回
                    2
                    新手上路，请多包涵

                    可以试下用组件来实现。

                    头像
                    了小黄鱼
                      2004

                      比如PHP里，把a.html中任意一段代码放到b.html文件中，然后在a.html那个地方这样调用

                      <?php include("b.html"); ?>
                      头像
                      已注销
                        4801512

                        使用pugjs可以

                        头像
                        zone
                          2651511

                          比如把头部菜单栏的HTML当作字符串放在一个单独的js文件里，

                          样式独立一个文件，js动画（如果有的话一个独立的文件） 用的时候去拿来把HTML插入到页面，然后该用样式用样式，该用js用js就好了。

                          额，上面有人说过了

                          头像
                          yukun
                            576311

                            不需要后端语言，让运维配置SSI就可以了,这里是文档。

                            配置后使用很简单

                            <!--# include file="footer.html" -->
                            头像
                            星星
                              6

                              可以用frameset,可惜html5标准取消了，不过依然可以用

                              头像
                              赵三省
                                212
                                新手上路，请多包涵

                                VUE做这个很简单,只需切换模块就能实现

                                头像
                                骑白马的大师兄
                                  31
                                  新手上路，请多包涵

                                  楼主应该是想复用吧
                                  1.可以用模板引擎,比如arttemplate,上手容易,功能简单,但是css样式,还有js你要再引用一次,关键他可以定义模板变量,可以改变你原来的一些内容
                                  2.vue和react 都有组件功能<template>,其实用过这两个框架后,你这个问题就迎刃而解了
                                  3.node.js搭配nunjucks也不错,node应该属于后端思想编写页面,处理你这个问题很简单

                                  头像
                                  majormayer
                                    9681889111

                                    推荐使用Vue+webpack 把导航栏做为模板即可 或者用母版页和子页的关系来处理

                                    头像
                                    走的匆忙
                                      802

                                      如果是jsp，php等做的，拿相当简单，直接抽出一个head来就可以了。
                                      如果是纯前端页面，填充数据进去，用node做一层渲染，用模板语言jade或者ejs等等 也可以抽出head

                                      头像
                                      没想好886
                                        1
                                        新手上路，请多包涵

                                        楼主之后怎么解决的？我之前也为这个问题纠结，最后还是用IFrame

                                        头像
                                        枫上雾棋
                                          1.5k7

                                          这个嘛，方案多多，只要愿意尝试，在这里推荐使用 node，毕竟它也是目前一大趋势，上手比 react 等主流 js 框架都简单，结合 ejs 模板引擎，轻松解决问题，附点代码

                                              app.engine('.html', ejs.__express);
    app.set('view engine','html');

                                          要是觉得这个学习成本有点大，还可以使用客户端路由来实现，详情请戳https://github.com/flatiron/d...

                                          撰写回答
                                          你尚未登录，登录后可以
                                          • 和开发者交流问题的细节
                                          • 关注并接收问题和回答的更新提醒
                                          • 参与内容的编辑和改进，让解决方法与时俱进
                                          被 1 篇内容引用
                                          推荐问题
                                          宣传栏