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), поэтому я подумал включить файл с помощью JavaScript с функцией document.write(), но я не не знаю, как добавить 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, который вы должны включить в свой проект, а затем использовать функцию загрузки, чтобы поместить его в какой-либо узел вашей сети, в этом случае я использовал div с классом «menuContainer» и меню. Я поместил файл с именем menu.html

    Важно: у вас должен быть веб-сервер, работающий на локальном хосте, чтобы иметь возможность использовать эту функцию, поскольку, если вы откроете файл через URL-адрес «file:///your_file.html» через браузер, это даст вам ошибку перекрестного происхождения, если у вас нет работающего веб-сервера, вы можете легко смонтировать его с помощью python3, используя модуль http.server, или в nodejs, используя http-сервер.

    <!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, которая также используется для выполнения приведенного выше ответа загрузки):

    Это состоит в создании панели навигации в отдельном файле:

    nav.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>

    А затем вызовите этот файл из других файлов:

    home.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 include. Однако, как и раньше, необходимо выполнить симуляцию сервера... потому что, если ошибка, о которой вам сказал @pedronalbert, не появится

    nav.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):

    home.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