Home / Questions / 70206
Accepted
Dev 200
Asked: 2020-05-16 15:26:05 +0800 CST 2020-05-16 15:26:05 +0800 CST

如何在其他 HTML 中包含 HTML？

  • 772

我的网页有一个菜单，问题是如果我想更改它，我将不得不修改许多文件（大约 40 个）所以我想使用带有 document.write() 函数的 JavaScript 包含文件，但我没有不知道如何添加 HTML

菜单.html

<div id="menu">
      <ul class="nav">
        <li><a href=""><font size="18">Street Level</font></a>
        <li>
          <a href="">Introduccion</a>
          <ul>
            <li><a href="#">Presentacion</a>
            </li>
            <li><a href="#">El evangelio</a>
            </li>
            <li><a href="#">El evangelio del Hip Hop</a>
            </li>
            <li>
              <a href="#">Herramientas</a>
              <ul>
                <li>
                  <a href="#">Motivacionales</a>
                  <ul>
                    <li><a href="#">Retos del dia</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Desenvolvimiento</a>
                  <ul>
                    <li><a href="#">Freestyle</a>
                    </li>
                    <li><a href="#">Batallas</a>
                    </li>
                    <li><a href="#">Gozatelo</a>
                    </li>
                    <li><a href="#">A Oscuras</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Creatividad</a>
                  <ul>
                    <li><a href="#">Cuadrado</a>
                    </li>
                    <li><a href="#">Reloj</a>
                    </li>
                    <li><a href="#">3x3</a>
                    </li>
                    <li><a href="#">8x2</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a href="">Hip Hop</a>
          <ul>
            <li><a href="#">Historia</a>
            </li>
            <li><a href="#">Dios: El Creador del Hip Hop</a>
            </li>
            <li>
              <a href="#">Los Cinco Elementos</a>
              <ul>
                <li><a href="#">Introduccion</a>
                </li>
                <li><a href="#">Breaking</a>
                </li>
                <li><a href="#">Mcing</a>
                </li>
                <li><a href="#">Djing</a>
                </li>
                <li><a href="#">Graffiti</a>
                </li>
              </ul>
            </li>
          </ul>
        <li>
          <a href="">Breakdance</a>
          <ul>
            <li><a href="#">Historia</a>
            </li>
            <li><a href="#">Filosofia</a>
            </li>
            <li><a href="#">Bboy - Bgirl</a>
            </li>
            <li>
              <a href="#">Breakbeat</a>
              <ul>
                <li><a href="#">"Break" the beat</a>
                </li>
                <li><a href="#">Ritmo</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Batallas</a>
              <ul>
                <li><a href="#">Respeto</a>
                </li>
                <li><a href="#">Señalar</a>
                </li>
                <li><a href="#">Copia-Originalidad</a>
                </li>
              </ul>
            </li>
            </li>
          </ul>
        <li>
          <a href="">Foundation</a>
          <ul>
            <li><a href="#">La casa construida sobre arena</a>
            </li>
            <li><a href="#">El hombre trinario</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="">La Persona</a>
          <ul>
            <li><a href="#">Objetivos Personales</a>
            </li>
            <li><a href="#">Breakdance: Estilo de vida</a>
            </li>
            <li><a href="#">Actitud</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="">El Cuerpo</a>
          <ul>
            <li><a href="#">A repetir!</a>
            </li>
            <li>
              <a href="#">Movimientos Basicos</a>
              <ul>
                <li><a href="#">Tecnica</a>
                </li>
                <li><a href="#">TopRock</a>
                </li>
                <li><a href="#">UpRock</a>
                </li>
                <li><a href="#">Go Down</a>
                </li>
                <li><a href="#">Footwork</a>
                </li>
                <li><a href="#">Freeze</a>
                </li>
                <li><a href="#">Powermove</a>
                </li>
              </ul>
            </li>
            </li>
            </li>
            <li>
              <a href="#">Preparacion Fisica</a>
              <ul>
                <li><a href="#">Fuerza</a>
                </li>
                <li><a href="#">Velocidad</a>
                </li>
                <li><a href="#">Resistencia</a>
                </li>
                <li><a href="#">Flexibilidad</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">CREARtividad</a>
              <ul>
                <li><a href="#">Combos</a>
                </li>
                <li><a href="#">Velocidad</a>
                </li>
                <li><a href="#">Entrada-Salida</a>
                </li>
                <li>
                  <a href="#">Triangulo Dinamico</a>
                  <ul>
                    <li><a href="#">Niveles</a>
                    </li>
                    <li><a href="#">Velocidad</a>
                    </li>
                    <li><a href="#">Espacio</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">EXPRESSividad</a>
              <ul>
                <li><a href="#">Fluidez</a>
                </li>
                <li><a href="#">Emociones</a>
                </li>
                <li><a href="#">Lenguajes</a>
                </li>
                <li><a href="#">Tonalidades</a>
                </li>
              </ul>
            </li>
          </ul>
        <li>
          <a href="">La Mente</a>
          <ul>
            <li><a href="#">A pensar!</a>
            </li>
            <li><a href="#">Breaking Goal</a>
            </li>
            <li><a href="#">The Magnet Method</a>
            </li>
          </ul>
        <li>
          <a href="#">El Alma</a>
          <ul>
            <li><a href="#">Ya no pienses!</a>
            </li>
            <li><a href="#">Modelos a seguir</a>
            </li>
            <li><a href="#">Estilo Propio</a>
            </li>
            <li><a href="#">Flavor</a>
            </li>
          </ul>
        </li>
      </ul>
      <!-- Lista Menu -->
    </div>
    <!-- Menu -->

如何在每个页面中包含该 HTML 代码？

javascript

3 Answers

  1. Best Answer

    最简单的方法是使用 jQuery，您必须将其包含在项目中，然后使用加载功能将其放置在 Web 的某个节点中，在这种情况下，我使用了带有“menuContainer”类和菜单的 div我已经放入了一个名为menu.html的文件

    重要提示：您必须在 localhost 上运行 Web 服务器才能使用此功能，因为如果您通过浏览器通过 url “file:///your_file.html”打开文件，它会给您一个跨域错误，如果您没有运行服务器 Web，您可以使用 python3 使用 http.server 模块或在 nodejs 中使用 http-server 轻松安装它。

    <!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="menuContainer"></div>
</body>

  <script>
    $(document).ready(function () {
      $('.menuContainer').load('./menu.html');
    });
  </script>
</html>
    • 11

  2. 我遇到了同样的问题，除了@pedronalbert之前评论过的加载方法之外，我已经寻找了几种方法来做到这一点

    仅使用 javascript 的一种方法是使用 XMLHttpRequest 对象（我已经使用 xampp 程序的服务器模拟在本地对其进行了测试，该程序也用于使上面给出的加载响应起作用）：

    这包括在单独的文件中创建导航栏：

    导航.html

    <ul>
    <li><a href="inicio.html">Inici</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Fotos</a></li>
    <li><a href="#">Contacto</a></li>
</ul>

    然后从其他文件中调用该文件：

    主页.html

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Título de la página</title>
    <script>
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'nav.html');
        xhr.setRequestHeader('Content-Type', 'text/plain');
        xhr.send();
        xhr.onload = function (data) {
            document.querySelector("nav").innerHTML = data.currentTarget.response;
            //para más de una barra de navegación
            /*var navs = document.querySelectorAll("nav");
            for(var i=0; i<navs.length; i++) {
                navs[i].innerHTML = data.currentTarget.response;
            }*/
            
        };
    </script>
</head>
<body>
    <div class="contenedor">
        <header>
            <!-- barra de navegación -->
            <nav></nav>
        </header>
    </div>
</body>
</html>

    作为 jQuery 加载方法的替代方法，还有 $.ajax 方法（也来自 jQuery）。据我所知，它们或多或少是等效的，但是 $.ajax 允许您更多地自定义操作

    另一种选择是使用 php 包含函数。但是，和以前一样，有必要进行服务器模拟......因为如果@pedronalbert 告诉你的错误没有出现

    导航.html

    <nav>
    <ul>
        <li><a href="inicio.php">Inici</a></li>
        <li><a href="#">Videos</a></li>
        <li><a href="#">Fotos</a></li>
        <li><a href="#">Contacte</a></li>
    </ul>
</nav>

    （考虑在文件中包含 php 代码时，它必须具有扩展名 .php，而不是 .html）：

    主页.php

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Título de la página</title>
    </head>
<body>
    <div class="contenedor">
        <header>
            <!-- barra de navegación -->
            <?php include "nav.html"; ?>
        </header>
    </div>
</body>
</html>
    • 2

  3. 最好的办法是使用动态内容，例如 PHP、Python、Perl 等...

    但是如果你想要一些静态的东西，你可以创建一个页面作为你的菜单，并在你想要出现的每个页面上使用 iframe 标记......

    iframe 标签允许您从另一个页面显示一个页面。

    例子：

    您创建“index.html”并在菜单所在的位置写入：

    <iframe src="./menú.html"></iframe>

    您创建一个“menú.html”文件并在正文中添加链接以及 target="_blank" 属性：

    <a href="otra_pag.html" target="_blank"> Otra Pag </a >

    这种方法的缺点是每个菜单项都会打开一个新的选项卡，这种情况下最好使用动态内容（就像Django在Python中的模板系统，很好地解决了这个问题）...

    • 2