Иногда вам может понадобиться отобразить содержимое другого HTML-файла в данном HTML-файле. В этой статье мы узнаем, как это сделать с помощью jQuery, который предлагает простой способ сделать это. При желании вы также можете отобразить другие HTML-файлы на веб-странице с помощью обычного JavaScript.
Как включить другой HTML в HTML-файл
Допустим, у вас есть следующая HTML-страница b.html.
| 1 2 3 4 5 | <html> <body> <p>File to be included</p> </body> </html> |
Вы можете включить эту страницу в другую HTML-страницу a.html с помощью функции load(). Допустим, у вас есть следующий файл a.html, и вы хотите отобразить приведенную выше HTML-страницу в div с id=load_content.
| 1 2 3 4 5 | <html> <body> <div id="load_content"></div> </body> </html> |
Вы можете легко сделать это, добавив следующий JavaScript.
| 1 2 3 4 5 | <script> $(function(){ $("#load_content").load("b.html"); }); </script> |
В приведенном выше коде мы вызываем функцию load() на div load_content и отображаем в нем файл b.html. Обратите внимание, что для работы приведенного выше кода необходимо включить библиотеку jQuery, как показано ниже.
| 1 2 3 | <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> </head> |
Во-вторых, путь к html-файлу b.html должен быть относительным по отношению к пути к файлу a.html. Другими словами, путь к включаемому файлу должен быть относительным по отношению к тому месту, где на него ссылаются.
Когда a.html будет загружен в веб-браузере, вы увидите, что все содержимое b.html отображается внутри div с id=load_content.
Заключение
В этой статье мы узнали, как включить другой HTML в HTML-файл. Это полезно, если вы хотите отобразить содержимое другой страницы на своей веб-странице, не переписывая код. Если на вашем сайте не используется система шаблонов, то это хороший способ отобразить верхние и нижние колонтитулы на всех страницах вашего сайта.