我需要能够将从远程 api 获取的 HTML 片段（嵌套元素和 CSS）嵌入到我的文档中，这样它们的 CSS 就不会影响我的整个文档。
我需要获取（随机）gmail 消息 HTML 并将它们嵌入到我的网站中。问题是大多数消息都有 CSS 标签来设置消息 html 的样式。问题是其中一些 CSS 与我自己的文档 CSS 混淆了。如何使用 CSS 嵌入 html 片段，使其具有自己的作用域并且不与其外部的内容交互？
<html>
<body>
<h1>Your gmail messages</h1>
<div id="gmail-message">
<!-- Here to be injected automatically. Changing classes, etc is not possible -->
<h1>This a gmail message</h1>
<style type="text/css">
h1 {
color: red;
}
</style>
</div>
</body>
</html>
gmail-message div 外部的 h1 标记也会受到影响，因此呈红色。
我需要做什么才能解决这个问题？
一种解决方案是使用 iframe。
另一个解决方案是提取所有 css 和 html，然后向 gmail-messag 内的每个 html 标签添加一个属性（例如：scope）。
然后修改 css 并添加属性选择器。
Example:
<html>
<body>
<h1>Your gmail messages</h1>
<div id="gmail-message">
<!-- Here to be injected automatically. Changing classes, etc is not possible -->
<h1 scoped>This a gmail message</h1>
<style type="text/css">
h1[scoped] {
color: red;
}
</style>
</div>
</body>
</html>
但使用 iframe 可能是一个更简单的解决方案。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
