Добавление html в html

@samiroutka · Регистрация: 26.03.2023

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

Нужно было найти способ вставки html в основной html файл максимально просто и без лишних хлопот(например у меня есть много страниц в который я просто должен был прописывать что-то типо "@include header.html"). Нашел способ с iframe:
https://www.filamentgroup.com/lab/html-includes/ короче смысл в том, что к iframe добавляется небольшой js, который перерабатывает html из iframe в нужном виде и вставляет его в главный html файл. Но проблема в том, что он делает это медленно, и когда я хочу например добавить к header какой-нибудь скрипт, то скрипт просто не может определить его, так как он ещё не был импортирован.
Помогите пожалуйста. Или предложите другой, похожий по простоте способ импорта html

krvsa · 08.08.2023, 11:54

samiroutka, вся эта кутерьма с хтмл-кусками тебе нужна именно на клиенте?

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

у меня есть много страниц в который я просто должен был прописывать что-то типо "@include header.html"). Нашел способ с iframe:

И он типа проще.

Да настолько что теперь у тебя есть проблемы.

@samiroutka · 08.08.2023, 12:07 **[ТС]**

Да нужно на клиенте.
Я просто не использую gulp, и не хочу его внедрять только из-за импортов. У меня только единственная проблема со скоростью, и то только вначале. Не знаешь как исправить?

krvsa · 08.08.2023, 12:27

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

Да нужно на клиенте.

Тогда можно написать аналог jQuery-метода .load()...
https://jquery-docs.ru/load/

@samiroutka · 08.08.2023, 12:29 **[ТС]**

Мне не нужен сервер. Сам html у меня в папке проекта. Нужно сделать по типу gulp include, но без gulp

krvsa · 08.08.2023, 12:33

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

Мне не нужен сервер

Сами файлы потом куда будешь девать?

Я вот про такую функцию...

JavaScript
1
2
3
4
5
6
7
8
9
10
function load(src, selector, callback) {
    fetch(src)
        .then(response => response.text())
        .then(svg => {
            let elements = Array.from(document.querySelectorAll(selector))
            elements.map(n => n.innerHTML = svg)
      
            callback()
        });
}

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

Нужно сделать по типу gulp include, но без gulp

Он работает на "сервере", а не на клиенте...

@samiroutka · 08.08.2023, 13:04 **[ТС]**

Мне нужны импорты для рефакторинга (разделения кода)

Помоги пожалуйста (если можешь)

krvsa · 08.08.2023, 14:31

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

Мне нужны импорты

Т.е. сами страницы тебе нужно собирать не на клиенте, а т.с. заранее делать готовые страницы из кусков и лишь потом все это выкладывать для использования на клиенте.

Для такого действа хорошо подойдет шаблонизатор. Например тот же PUG

@samiroutka · 08.08.2023, 15:20 **[ТС]**

Думаю не то, слишком сильно синтаксис изменился, сложно будет сразу же взять и использовать (извини за то, что почти ничего не подходит).
Вот моя структура. Например в папке header есть header.html и мне нужно его импортировать во все другие страницы

krvsa · 08.08.2023, 15:32

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

Например в папке header есть header.html и мне нужно его импортировать во все другие страницы

Это я понял...
Вот некоторые шаблонизаторы имеют такую возможность "в какое-то место вставлять" содержимое из другого файла.

Добавлено через 4 минуты
Вот десяток (типа лучших) шаблонизаторов... Выбирай любой.
https://proglib.io/p/top-10-sh... 2023-01-17

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

@samiroutka 4 / 4 / 1 Регистрация: 26.03.2023 Сообщений: 153

	Добавление html в html 08.08.2023, 10:44. Показов 810. Ответов 9 Метки css, html, iframe, javascipt (Все метки) Нужно было найти способ вставки html в основной html файл максимально просто и без лишних хлопот(например у меня есть много страниц в который я просто должен был прописывать что-то типо "@include header.html"). Нашел способ с iframe: https://www.filamentgroup.com/lab/html-includes/ короче смысл в том, что к iframe добавляется небольшой js, который перерабатывает html из iframe в нужном виде и вставляет его в главный html файл. Но проблема в том, что он делает это медленно, и когда я хочу например добавить к header какой-нибудь скрипт, то скрипт просто не может определить его, так как он ещё не был импортирован. Помогите пожалуйста. Или предложите другой, похожий по простоте способ импорта html 0

@samiroutka 4 / 4 / 1 Регистрация: 26.03.2023 Сообщений: 153
	08.08.2023, 12:07 [ТС]
	Да нужно на клиенте. Я просто не использую gulp, и не хочу его внедрять только из-за импортов. У меня только единственная проблема со скоростью, и то только вначале. Не знаешь как исправить? 0

@samiroutka 4 / 4 / 1 Регистрация: 26.03.2023 Сообщений: 153
	08.08.2023, 12:29 [ТС]
	Мне не нужен сервер. Сам html у меня в папке проекта. Нужно сделать по типу gulp include, но без gulp 0

@samiroutka 4 / 4 / 1 Регистрация: 26.03.2023 Сообщений: 153
	08.08.2023, 13:04 [ТС]
	Мне нужны импорты для рефакторинга (разделения кода) Помоги пожалуйста (если можешь) 0

@samiroutka 4 / 4 / 1 Регистрация: 26.03.2023 Сообщений: 153
	08.08.2023, 15:20 [ТС]
	Думаю не то, слишком сильно синтаксис изменился, сложно будет сразу же взять и использовать (извини за то, что почти ничего не подходит). Вот моя структура. Например в папке header есть header.html и мне нужно его импортировать во все другие страницы Миниатюры 0