В недавнем проекте мне требовалось добавить HTML-страницу, сгенерированную внешней службой, в мое приложение next.js. Обычно использование Next.js для традиционных файлов HTML является излишним, но в нашем случае все приложение / веб-сайт написано с использованием Next.js. Только небольшую часть нужно импортировать извне.
Сначала я попытался найти способ напрямую анализировать HTML, чтобы мне не приходилось конвертировать его в jsx. Кроме того, это был довольно большой HTML-документ со стилями и JavaScript. Решение оказалось довольно простым и понятным. И это решение, которое я собираюсь вам объяснить, можно использовать для сценариев, в которых вы хотите встроить внешнюю веб-страницу (убедитесь, что включен кросс-источник). Я закончил нас использованием iframe. Я поместил HTML-файл в общий каталог и использовал iframe следующим образом.
<iframe src="/test.html" width="100%"></iframe>
Довольно прямолинейно и просто. Тем не менее, я хотел поделиться с вами несколькими приемами, которые я использовал в этом проекте.
Совет 1: сопоставьте высоту iframe с высотой содержимого внутри iframe.
Это гарантирует, что нет полос прокрутки, ни один контент не скрыт, и создается впечатление, что iframe является неотъемлемой частью страницы. И это должно хорошо работать при изменении размера браузера или контейнера div - в нашем случае в дополнение к div, содержащему iframe, на той же странице есть компоненты верхнего, нижнего колонтитула и навигации, и навигация может быть открыта или закрыта. Это делается с помощью прослушивателей событий на iframe.contentWindow в ловушке useEffect следующим образом:
Прохладный! iframe теперь является частью нашего документа. Но все же оставалась проблема. В документе использована темная тема, а для содержимого внешней страницы используется белый фон.
Уловка 2: используйте dark-reader для автоматической генерации CSS для вашей внешней страницы.
Вы можете использовать dark-reader для автоматического применения темного стиля к вашей странице. Есть два варианта. Во-первых, используйте dark-reader в своем проекте через npm и автоматически примените темную тему. В моем случае это было немного перебором, и я выбрал второй вариант. Второй вариант - сгенерировать и экспортировать файл css, соответствующий темной теме вашей внешней страницы, а затем добавить эту таблицу стилей в наш iframe.
Сначала установите в браузер надстройку / расширение dark-reader. Я сделал это в Firefox. Затем откройте свою внешнюю страницу в этом браузере и включите темный режим в надстройке dark-reader.
Когда вы включаете темный режим, темный читатель сгенерировал и применил соответствующий стиль, чтобы сделать вашу страницу темной. Работает отлично. Вы также можете настроить яркость и контраст, а также использовать инструменты разработчика для дальнейшей настройки дизайна. Как только вы довольны дизайном, нажмите кнопку действия браузера с темным ридером, чтобы открыть всплывающее меню, и выберите настройки.
Это откроет вид настроек, как показано ниже.
Нажмите "Управление настройками", а затем - Экспортировать динамическую тему.
Прекрасная работа! Это загрузит файл css, который вы можете добавить на свою страницу, чтобы применить стили для темной темы. Хммм… Пока все хорошо. Я считаю, что большинство из вас сделало бы все остальное самостоятельно, но для полноты картины давайте добавим несколько строк кода в обработчики событий, которые мы создали в Hack1.
Сохраните файл css, загруженный программой dark-reader, как dark-theme.css в каталог /public вашего приложения Next.js. Теперь добавьте следующие строки в "load" прослушиватель событий.
const link = doc.createElement("link");
link.rel = "stylesheet";
link.href = "/dark-theme.css";
doc.head.appendChild(link);
В следующий раз, когда вы сделаете это, вы сможете добавить существующие HTML-файлы в свой проект с настраиваемыми темами за гораздо меньшее время, чем время, потраченное на чтение этого документа.
Желаю вам всего наилучшего и удачного программирования!
Заинтересованы в построении карьеры в веб-разработке? Оформить заказ E-степень в JS Frameworks
