Как загрузить HTML-файл со стилем, не затрагивая остальные стили страницы?

Question

Я создаю базовый почтовый клиент для себя в электронном виде. Когда я загружаю электронное письмо, эти данные должны отображаться внутри элемента div, который выглядит следующим образом <div id="emailDisplay"></div>. Единственная проблема заключается в том, что этот HTML может содержать встроенные таблицы стилей, которые затем влияют на остальную часть страницы. Я попытался использовать iframe, но когда не удалось загрузить один из элементов (например, изображение), это вызвало исключение, и мой другой необходимый JavaScript никогда не выполнялся. Точная ошибка net::ERR_CONNECTION_TIMED_OUT. Итак, я спрашиваю, как я могу отобразить этот HTML-код, чтобы он не влиял на остальные стили документа, или как я могу отловить и игнорировать ошибку iframe? Заранее спасибо.

Answer 1

Только старые почтовые клиенты поддерживают запуск JavaScript, для этого открывается множество уязвимостей безопасности, не рекомендуется.Iframe создает другой контекст браузера.Каждый контекст браузера является полной средой документа, и для iframe CSS невозможно повлиять на родительский CSS.

Answer 2

Ну, а как насчет использования тега в вашем HTML? Это все еще будет HTML, и если вы укажете его для стиля только одного тега, он будет работать.

<div id="emailDisplay"></div>
<style>
    #emailDisplay {
        background-color: red;
    }
</style>

Еще один способ решения этой проблемы - создание инкапсулированных компонентов javascript (возможно, с помощью Vue или React)