Как с помощью Javascript включить header.html в другие страницы

Для сайтов на ванильном стеке HTML/CSS/Javascript часто возникает необходимость создать общие страницы header.html и footer.html, которые будут включены в другие html страниц.

Например, у нас сайт из нескольких страниц — about.html, index.html и contacts.html и мы хотим переиспользовать в них наш подвал и шапку, а не копировать код постоянно во все страницы.

Для решения этого вопроса мы можем использовать JavaScript. Есть способ сделать это, используя только HTML и JavaScript. Используем следующее.

<html>
<head>
<title></title>
<script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous">
</script>
<script> 
$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});
</script> 
</head>
<body>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
</body>
</html>

Разместите header.html и footer.html в том же месте, что и index.html.

Теперь при посещении index.html вы должны увидеть шапку и подвал. Но не забудьте в файлы header.html и footer.html что-то добавить перед тем как тестировать данный способ.

Опубликовано 19 апреля 2024 в 12:26
Обновлено 30 апреля 2024 в 00:32
Категория: Блог