Как вставить html на все страницы сайта с использованием js

@DmitryMyrkotan · Регистрация: 14.06.2019

Студворк — интернет-сервис помощи студентам

Здравствуйте, нужно помочь с созданием скрипта который вставляет на все страницы сайта один и тот же код (код сайт бара чтобы не редактировать все страницы сайта, а просто изменять скрипт).То есть нужно вставлять на сайт div с классом sitebar и его содержимое. Проблема в том что я только недавно начал учить JS и еще даже не дошел до DOM, готового решения в интернете увы не нашел. У меня есть только HTML и CSS. Я сделал простой пример по подобию сайта, вот ссылка на файл exemple-20190617T075247Z-001.zip . Заранее спасибо.

HTML:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
    <div class="wrapper">
        <div class="content-mini-conteiner">
            <div class="sitebar">
                <ul>
                    <li><a href="#">example 1</a></li>
                    <li><a href="#">example 2</a></li>
                    <li><a href="#">example 3</a></li>
                    <li><a href="#">example 4</a></li>
                    <li><a href="#">example 5</a></li>
                </ul>
            </div>  
        </div>
        <div class="content">
            Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
                        Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
        </div>
    </div>
</body>

CSS:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.content {
  width: 500px;
  min-height: 50px;
  height: 100%;
  background: #A0A0A0;
  float: left;
}
 
.sitebar {
  width: 200px;
  min-height: 50px;
  height: 100%;
  background: #A0A0A0;
  float: right;
}

@Андрей МСК · 15.06.2019, 01:09

Если вы вставите блок при помощи JS его не будет в DOM.
используйте PHP функцию

PHP
1
include("file.php");

@DmitryMyrkotan · 15.06.2019, 09:04 **[ТС]**

В принципе можно, но как с помощью include() вставить html именно в div с классом content-mini-conteiner.

@Андрей МСК · 15.06.2019, 10:39

HTML5
1
2
3
<div class="content-mini-conteiner">
  <?php include("file.php");?>
</div>

@AlexZaw · 15.06.2019, 11:18

Сообщение от Андрей МСК

Если вы вставите блок при помощи JS его не будет в DOM.

Стесняюсь спросить. А куда он денется?

Сообщение от DmitryMyrkotan

нужно помочь с созданием скрипта который вставляет на все страницы сайта один и тот же код

Извращение конечно, но в принципе возможно, просто придется подгружать ваш скрипт на каждой странице да и плюс пока браузер загрузит и обработает ваш скрипт на странице не будет видно вашего сайдбара, значит страница будет "прыгать".
Вообщем придется решать кучу дополнительных проблем чтобы все было красиво

Вам правильно посоветовали - используйте php

@Андрей МСК · 15.06.2019, 11:25

AlexZaw, "Стесняюсь спросить. А куда он денется?"
Имел ввиду в изначальном DOM его не будет...

@Evgeniy55 · 16.06.2019, 18:51

Можно через PHP как выше подсказали или как вариант для HTML использовать препроцессор Pug и вставлять через mixin https://pugjs.org/language/mixins.html

А если очень нужно на нативном JS, то это по сути создать(а можно и не создавать вовсе а просто в JS указать после какого элемента это все расположить) пустой элемент с каким-то id в DOM, затем в JS через узлы https://learn.javascript.ru/modifying-document создать структуру и все это закинуть в этот элемент... это так на вскидку что пришло в голову...

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@DmitryMyrkotan 0 / 0 / 0 Регистрация: 14.06.2019 Сообщений: 2
	15.06.2019, 09:04 [ТС]
	В принципе можно, но как с помощью include() вставить html именно в div с классом content-mini-conteiner. 0

@Андрей МСК 23 / 15 / 8 Регистрация: 29.10.2013 Сообщений: 294
	15.06.2019, 11:25
	AlexZaw, "Стесняюсь спросить. А куда он денется?" Имел ввиду в изначальном DOM его не будет... 0

@Evgeniy55 108 / 102 / 35 Регистрация: 14.03.2014 Сообщений: 586
	16.06.2019, 18:51
	Можно через PHP как выше подсказали или как вариант для HTML использовать препроцессор Pug и вставлять через mixin https://pugjs.org/language/mixins.html А если очень нужно на нативном JS, то это по сути создать(а можно и не создавать вовсе а просто в JS указать после какого элемента это все расположить) пустой элемент с каким-то id в DOM, затем в JS через узлы https://learn.javascript.ru/modifying-document создать структуру и все это закинуть в этот элемент... это так на вскидку что пришло в голову... 0

Как вставить html на все страницы сайта с использованием js

Решение