Question

我需要能够将从远程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标签也会受到影响，因此为红色。
我该怎么办才能解决这个问题？

Answer 1

一种解决方案是使用iframe。

另一种解决方案是提取所有CSS和html，然后向gmail-messag内的每个html标签添加一个属性（例如：范围）。然后修改CSS并添加属性选择器。

示例：

<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>

但是适当地使用ifram是更简单的解决方案。

Answer 2

最简单的方法是使用iframe / object / embed标签（在Firefox上测试）。如果您可以使用Javascript和HTML5，则还可以使用阴影DOM或使用插槽标签（也可以在shadowRoot中）创建自定义元素。

Answer 3

您可能想使用The Shadow DOM

Web组件的一个重要方面是封装-可以 将标记的结构，样式和行为隐藏起来并分开与页面上的其他代码进行匹配，以使不同部分不会发生冲突，并且代码可以保持整洁。 Shadow DOM API是关键部分为此，提供了一种将隐藏的单独DOM附加到元素。

但是，请注意，这是一项新技术，并且像往常一样，Microsoft浏览器无法对其进行处理。

Answer 4

我找到了解决方法。

首先，在某处插入一个空的iframe广告代码。

<iframe id="iframeTag" src="about:blank"></iframe>

第二，通过以下方式将html代码段加载到该iframe中：

var doc = document.getElementById('iframeTag').contentWindow.document;
doc.open();
doc.write(<html_snippet>);
doc.close();

这样，<html_snippet>的CSS不会与外部文档的CSS混在一起。

Answer 5

使用 srcdoc 上的 iframe 属性来确定 HTML 和 CSS 的范围。

<iframe srcdoc="<p>Hello world!</p>"></iframe>

所有主流浏览器都支持：https://caniuse.com/iframe-srcdoc

如何在文档中嵌入作用域html（css）

5 个答案: