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

【问题标题】：How to load HTML file with style without affecting the rest of the page styles?如何在不影响其余页面样式的情况下加载带有样式的 HTML 文件？
【发布时间】：2019-07-28 16:42:32
【问题描述】：

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

【问题讨论】：

iframe 是要走的路。无论您使用什么，该错误都会发生，因为这是一个网络错误，与代码无关。您可以尝试embed 或object，但它们与iframe 有相同的问题并且更难使用。

标签： javascript html css node.js electron

【解决方案1】：

那么，在 HTML 中使用标签怎么样？它仍然是 HTML，如果您将其指定为仅设置一个标签的样式，它将起作用。

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

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

【讨论】：

这个问题是没有办法从文档中提取样式标签。我可以使用正则表达式，但问题是我不能 100% 获得每封电子邮件的样式。

【解决方案2】：

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

【讨论】：

是的，我明白这一点，但是当我的图像的获取请求未加载时，my JavaScript 未加载。
说您需要在加载图像之前运行代码？将代码移到图片上方，在文档头部加载JavaScript
JavaScript 在头部。
问题可以加简化相关代码吗？非常乐意提供帮助，对图像加载失败引发 JavaScript 错误的部分感到困惑，除非附加了一个带有一些错误代码的 onLoad 处理程序
所以我想通了，但我不能让你坚持下去，因为你会因为试图理解而发疯。基本上，我在代码中的某个位置添加了一个window.onload 事件，我所有的 JavaScript 都在其中。因此，当图像在等待 GET 响应时，JavaScript 基本上是不可用的。所以，我把我的 JavaScript 移出了 window.onload，现在它可以完美地工作了。感谢您愿意提供帮助，如果您想进一步讨论这个问题，可以在 discord Jonah#5945 上加我。