如何在不影响其余页面样式的情况下加载具有样式的HTML文件？

Question

我正在为自己创建电子基础电子邮件客户端。加载电子邮件时，该电子邮件数据需要显示在看起来像<div id="emailDisplay"></div>的div元素内。唯一的问题是，此html可以包含嵌入的样式表，这些样式表随后会影响页面的其余部分。我尝试使用iframe，但是当其中一个元素加载失败（例如图像）时，它导致了异常，而我所需的其他JavaScript从未执行。确切的错误是net::ERR_CONNECTION_TIMED_OUT。因此，我要问的是如何在不影响文档其余样式的情况下显示此HTML，或者如何捕获和忽略iframe错误？预先感谢。

Answer 1

那么，如何在HTML中使用标记？ 它仍将是HTML，如果您仅指定其样式，则它将起作用。

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

解决此问题的另一种方法是通过创建封装的javascript组件（也许使用Vue或React）

Answer 2

只有古老的电子邮件客户端支持运行JavaScript，这样做会打开很多安全漏洞，不建议这样做。 iframe会创建另一个浏览器上下文。每个浏览器上下文都是一个完整的文档环境，iframe CSS不可能影响父CSS。