简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 请问前端大神，html如何引入另一个html，写了一个导航栏想在多个页面中如何重复使用？
ringa_lee
ringa_lee 2017-04-11 12:32:30
0
19
1755

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

如图 ：

ringa_lee
ringa_lee

ringa_lee

모든 응답(19)
黄舟
黄舟2017-04-11 12:34:30 19층

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

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

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

导入

<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>
좋다 +0
답글 추가
Peter_Zhu
Peter_Zhu2017-04-11 12:34:30 18층

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

좋다 +0
답글 추가
大家讲道理
大家讲道理2017-04-11 12:34:30 17층

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

좋다 +0
답글 추가
大家讲道理
大家讲道理2017-04-11 12:34:30 16층

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

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

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

좋다 +0
답글 추가
左手右手慢动作
左手右手慢动作2017-04-11 12:34:30 15층

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

좋다 +0
답글 추가
Peter_Zhu
Peter_Zhu2017-04-11 12:34:30 14층

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

좋다 +0
답글 추가
刘奇
刘奇2017-04-11 12:34:30 13층

用react框架轻松实现。

좋다 +0
답글 추가
左手右手慢动作
左手右手慢动作2017-04-11 12:34:30 12층

可以试下用组件来实现。

좋다 +0
답글 추가
伊谢尔伦
伊谢尔伦2017-04-11 12:34:30 11층

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

<?php include("b.html"); ?>
좋다 +0
답글 추가
巴扎黑
巴扎黑2017-04-11 12:34:30 10층

使用pugjs可以

좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！