Есть ли способ отобразить немного стилизованный HTML отдельно от остальных стилей сайта?

Question

Я пытаюсь найти способ показать архив рассылок по электронной почте на сайте моего клиента. Проблема заключается в том, что информационные бюллетени полны миллиардов встроенных стилей, что отлично подходит для их просмотра в Outlook или где-либо еще, но они не выглядят слишком остро на сайте, который в остальном красиво оформлен.

Моя цель - чтобы мой клиент мог скопировать весь исходный код сгенерированного информационного бюллетеня (к которому ее управляющая компания * предоставляет ей доступ) и вставить его в CMS (drupal, если это имеет значение).

* Постоянный контакт? Почта шимпанзе? Я забыл. Один из них.

Тогда я бы хотел отобразить это на ее сайте, внутри базовой структуры (заголовок, навигация и т. Д.) Остальной части сайта. Если бы это был 1997 год, я бы сказал: "iframes!" и покончим с этим, но A) это выглядит как неудачное решение, и B) код фактически не существует на странице сам по себе, что, я думаю, необходимо для iframes.

Есть ли какой-нибудь тег, который я могу поместить вокруг этого блока HTML, чтобы изолировать его от остальных стилей сайта? Или есть другой способ сделать это полностью?

Спасибо!

Answer 1

IFrames - единственный путь, который я когда-либо смог найти. Единственной альтернативой этому является переопределение каждого стиля в CSS родительской страницы для области отображения информационного бюллетеня.

Как вы заметили, использование iframe, вероятно, потребует от вас размещения информационных бюллетеней в отдельном файле. Единственная альтернатива, о которой я знаю, это то, что вы можете использовать JavaScript для динамического создания и / или заполнения iframe.

Если вы воспользуетесь этим методом, вы можете представить бюллетень в div с определенным классом, а затем использовать JavaScript для перемещения div в iframe. Большим недостатком является то, что этого не случится с пользователями без включенного JavaScript.

Answer 2

9 лет спустя, и лучшего решения пока нет.

Если у вас нет внешнего источника (вы не можете добавить html в фрейм вручную), вам нужно использовать js для вставки грязного html / css (в моем случае я использую его для просмотра писем)

<iframe class="my-frame" width="100%" height="100%" src="about:blank"></iframe>

и js:

const frame = document.querySelector('.my-frame');

frame.contentWindow.document.open('text/html', 'replace');
frame.contentWindow.document.write(hereGoesYourMessyHtmlCss);
frame.contentWindow.document.close();

Answer 3

На мой взгляд, обрезка и вставка необработанного HTML представляет слишком много проблем с безопасностью. Никогда не доверяйте вводу пользователя. Даже если содержимое полностью безоблачное, на следующей неделе разработчик бюллетеня может принять решение изменить форматирование или включить какой-либо javascript, и вы будете нести ответственность за все, что может пойти не так.

Поэтому я бы реализовал парсер, который отбрасывал бы все, кроме части контента, и оставлял бы только b, a, h *, blockquote и подобные простые элементы, такие как разрешенные в сообщениях на форуме, а также их стили. После этого вы можете отобразить его как обычный пост в CMS. Я не вижу причин, по которым это должно выглядеть иначе.

Что касается того, как изолировать это от вашего другого CSS, вам на самом деле не нужно, если вы осторожны, чтобы все правила CSS вашей CMS применялись к элементам с конкретными классами. В качестве альтернативы, сделайте сброс CSS для ваших сообщений:

.post p {
     margin: 0;
     ... 
.post /* all the standard CSS reset rules preceded with .post */

, а затем

<div class="post"> content parsed from your CMS </div>

Answer 4

Есть ли причина, по которой вы не можете использовать модал? Это позволит вам форсировать новый запрос и заставить страницу отображаться так, как вы хотите, не применяя общую таблицу стилей и в то же время удерживая пользователя на нужной странице. Конечно, он не отображает встроенный элемент, так сказать, почти функционально эквивалентный.