Вставить html страницу в другую html страницу?! Легко!

Вставить html страницу в другую html страницу

Иногда возникает необходимость вставить html страницу в другую html страницу. Для чего это нужно?

Зачастую при разработке сайта html страница набирает довольно большой объем html кода и чтобы структурировать и привести разметку в порядок было бы не плохо разбить html разметку на отдельные части, которые в дальнейшем можно встроить в содержимое основной html страницы. Упростите работу себе и другим!

В качестве плагина я буду использовать include HTML plugin - это небольшая js библиотека скачать которую вы можете перейдя на github репозиторий

Подключим include HTML в index.html в секцию head:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="includeHTML.js"></script>
</head>
<body>

</body>
</html>

Создадим три div блока в которые добавим теги include с указанием пути до встраиваемой html разметки:

<div>
    <include src="included/header.html"></include>
</div>

<div>
    <include src="included/content.html"></include>
</div>

<div>
    <include src="included/footer.html"></include>
</div>

В корне проекта создадим папку included в которой будут лежать встраиваемые куски html разметки и создадим в ней три html файла:

header.html
content.html
footer.html

Содержимое этих файлов будет выглядеть следующим образом:

<!--header.html-->

<p>
    header
</p>
<!--content.html-->

<p>
    content
</p>
<!--footer.html-->

<p>
    footer
</p>

Читайте также:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *