Любой способ отобразить HTML-код с большим стилем в отрыве от остальных стилей сайта?

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

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

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

Затем я хотел бы отобразить его на своем сайте, внутри основной структуры (заголовок, навигатор и т. Д.) Остальной части сайта. Если бы это было в 1997 году, я бы сказал «iframes!». и делать с ним, но A), который выглядит как хромое решение, и B) код на самом деле не существует на одной странице, что, как мне кажется, требуется для iframes.

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

Благодаря!

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

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

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

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

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

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

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

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

а потом

 
content parsed from your CMS

Спустя 9 лет, и все еще не лучшее решение.

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

  

и js:

 const frame = document.querySelector('.my-frame'); frame.contentWindow.document.open('text/html', 'replace'); frame.contentWindow.document.write(hereGoesYourMessyHtmlCss); frame.contentWindow.document.close();