Импорт/изменение содержимого HTML (после обновления ES6)
Я пытался динамически изменять содержимое моей HTML-страницы, импортируя внешние HTML-файлы. Я нашел способ сделать это с помощью импорта HTML, но, если я правильно понял, эта функция устареет из-за обновления ES6. Из того, что мне удалось найти в Интернете, может быть альтернативный способ сделать это с помощью модулей javascript, но я не могу найти ничего конкретного.
Я хочу изменить большую часть страницы (окно, содержащее форму, становится окном, демонстрирующим пользовательскую статистику), поэтому использование .innerHTML в javascript не кажется разумным. У кого-нибудь есть хорошие идеи о том, как импортировать файлы html или динамически изменять содержимое страницы? (используя javascript, узел и т. д.)
Любая помощь очень ценится :)
Возможный дубликат Как упаковать или импортировать Html-шаблоны без Html-Imports
или stackoverflow.com/q/52435955/4600982
@Supersharp Спасибо за ответы. Сейчас я использую: $('#form-container').load('login-form.html'); И, похоже, он работает. Есть ли у этого метода какие-либо недостатки, которые могут сделать ваши предложения более жизнеспособными?
@ dun32 Спасибо за ответ. У меня нет практики работы с фреймворками, и для этого проекта я не думаю, что у меня есть время вникать в него. Внедрение html-контента даже не является обязательным, но я хотел бы сделать это как побочный проект (основное внимание уделяется хранению данных в mysql и созданию какого-то веб-сайта).
@AugustTengland Вы используете jQuery, который является своего рода оболочкой для функций utils. Vanilla JS всегда более жизнеспособна, чем любая сторонняя библиотека, но это очень личное мнение.
@Supersharp Хорошо, кажется, я понял. В этом проекте я пойду по простому пути и буду придерживаться jQuery, но учту ваши слова в будущем.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я немного опоздал, и ответ уже был связан с комментариями к этому вопросу, но я все равно иду.
Вы должны иметь возможность использовать Ajax для получения содержимого файла html. (как строка)
С содержимым html-файла вы сможете разобрать его в htmlDoc в JS (например, глобальный document из document.getElement и т. д.), используя класс DOMParser.
https://developer.mozilla.org/en-US/docs/Web/API/DOMParser
https://codepen.io/Deefoozy/pen/PeYWge
После синтаксического анализа html в htmlDocument вы сможете получить тело через результат, используя .getElement или .body.children. Результатом этого должен быть простой domNode, который вы можете добавить к другому domNode.
Спасибо за ответ и извините за еще более поздний ответ. В итоге я переключился с простого HTML на EJS и использовал res.render() в узле для передачи некоторых данных. Затем я использую эти данные в сочетании с функцией включения EJS для импорта различных частей веб-страницы. У меня это сработало нормально, но если цель состоит в том, чтобы использовать простой HTML, то ваше решение, вероятно, является хорошим способом.
Здесь у вас есть Отличная документация MDN о веб-компоненте. Можно ли выбрать фреймворк (Angular, vue.js, реагировать)? Потому что все эти фреймворки созданы для быстрого и последовательного создания динамических веб-приложений.