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

zsj0310
  • 63

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

如图 :
图片描述

回复
阅读 29.6k
19 个回答

可以使用htmlimport这个功能
通过声明 <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>

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插入的话,建议使用前两者

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

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

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

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

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

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

Oo蛋茶色oO
  • 1
新手上路,请多包涵

用react框架轻松实现。

小回
  • 2
新手上路,请多包涵

可以试下用组件来实现。

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

<?php include("b.html"); ?>

使用pugjs可以

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

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

额,上面有人说过了

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

配置后使用很简单

<!--# include file="footer.html" -->

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

赵三省
  • 2
新手上路,请多包涵

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

骑白马的大师兄
  • 3
新手上路,请多包涵

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

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

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

没想好886
  • 1
新手上路,请多包涵

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

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

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

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

宣传栏