在没有CSS冲突的情况下将HTML注入另一个页面

Question

我正在使用Javascript将一些程式化的HTML注入到另一个网页（已被抓取）中，并且我尝试以最小化与目标页面的CSS样式的任何冲突的方式来执行此操作。我正在注入一个固定位置<div>，它在目标页面上清晰地浮动。

到目前为止，我采用的方法是创建一个独特的CSS id（一种命名空间），首先重置所有可以想象的样式，然后应用自己的样式：

/* reset */
#my-div {display: block; visibility: visible; margin: 0; padding: 0; ... etc}
/* my styles */
#my-div {margin: 10px 5px; ... etc}

然而，<div>包含文本，链接，图像，所以我不得不为其中的所有内容执行此操作并生成大量CSS代码。这是因为目标页面自己的样式将通过其他方式来影响我注入的HTML。

我可以这样做......但我想知道是否有人知道更聪明/更简单的方法我可以保护我的HTML / CSS不受目标网页的影响。

提前感谢任何想法。

Answer 1

最简单的方法是iframe，以便iframe或页面的样式不会相互影响。然而，叠加将更加棘手。

Answer 2

独特地命名你的类和id似乎是使用iframe的最佳方法。我真的没有看到另一种方式。我看到有些人做的是在任何css之前用短划线命名一个缩短的命名空间，即“twc-topnav”。