@facetus
Любопытный перфекционист

Можно ли на js сделать динамическое добавление html?

Добрый день!
Можно ли так сделать? >> Для себя), чтоб можно было создавать скажем html файлы с контентом, а визуализация бы подтягивалась из главного html пусть даже с помощью дополнительных строчек кода...

В xhtml, по-моему, есть такая фича какая include, если не ошибаюсь. Т.е. можно из одного html достать код и вложить в другой, что позволяет менять визуализацию только в одном html файле....(немного иначе, но не суть)

p.s. Как хобби практикую html/css, но чтоб это не было скучно делаю свой сайтик...кол-во страниц растёт, они однотипные, но с разным контентом, а поменять что-то в структуре - приходится делать это в каждом html'е...

p.s. 2. Если нельзя так сделать, то подскажите как спрашивать гугл, чтоб найти скрипт на php тогде уж...хотелось без сервера обойтись, но что делать..
  • Вопрос задан
  • 354 просмотра
Решения вопроса 6
@curious-101
Frontend developer
pug конкретно фича которая вам нужна https://pugjs.org/language/includes.html
Ответ написан
Комментировать
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
Про pug-include уже ответили, это правильное решение.

Поскольку хочется без сервера, есть парочка мыслей.

В качестве эксперимента и для себя, попробуй "сварить" вот это)
al-scvorets.github.io/wm-html-include.js
Я помню, меня сильно затянуло, когда первый сайт сделал так, для себя)

(выделил, как наиболее интересное решение)

А также есть старенькая технология SSI htmlbook.ru/webserver/ssi
В принципе, тоже само по себе рабочее.

Нагуглил еще одно решение HTML Import, если честно не пробовал.
https://www.html5rocks.com/en/tutorials/webcompone...
Но судя по описанию, с вашей задачей справится.
Ответ написан
@rPman
Если у вас веб-сервер отдает только статику (обычное дело для бесплатных/дешевых хостингов, да и сама статика очень эффективна и не нагружает сервер) то это нормальная практика собирать страницу на стороне клиента.

include это частный случай шаблонизатора. Сами шаблонизаторы очень простые, фактически можно без каких либо библиотек просто использовать $('#replace_element_id').innerHTML='html text string' а саму html брать тут же из документа, разместив его например в скрытых div или как рекомендуют <script type="text/html">....</script> (будьте осторожны со скриптами внутри и валидностью верстки)

Эта стратегия называется single page app когда абсолютно все необходимое размещено в одной странице, статике, которая загружается однократно и кешируется на клиентской стороне. Страницы веб приложения и их параметры разделяются с помощью anchor (index.html#page/arguments/etc), в этом случае будет корректна работать история браузера, разбираются они javascript простым анализом url. Никаких библиотек для этого не требуется, это стандартная фича в любом браузере.

Если же вам нужны нестатичные данные, они загружаются с вашего веб-сервера в виде json файлов (такие файлы легко разобрать в javascript с помощью JSON.parse(text) с помощью ajax (или XMLHttpRequest если вы не хотите подключать библиотеки)
Ответ написан
Комментировать
Комментировать
@Froggyweb
если страницы аидны в сети, то их отдает сервер - без вариантов.

ну для начала есть cms которые отдают контекстную часть. по указанному шаблону. например вордпресс и пр.

В вашем случае можно использовать просто функцию PHP php.net/manual/ru/function.include.php

Есть Jekyll

Есть еще куча решений.

Народ советует какой-то гемморой с сервером на локальной машине в виде node.js и каких-то куча шаблонизаторов с непонятным синтаксисом и другими задачами.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы