如何在另一个网页中嵌入网页并隔离CSS

Question

我需要在另一个网页中嵌入一个网页，内页将被<div>包裹，不包含html，标题或类似内容，但内页可以包含<link>' s to css我不想影响外页

我目前用ajax获取html并将其插入外部dom，以解决冲突的样式我在嵌入dom之前提取任何链接，使用ajax获取css，解析样式并使用jquery选择器内联应用它们

对于像psuedo选择器这样的东西有明显的问题，但是主要问题是外页的样式影响内页，我不能合理地重置每个可能的样式，我需要访问内页dom所以使用iframe是不可能的。

这是一个相当复杂的设置，但我想知道是否有人在类似的线路上看到任何东西或者有更好的方法。

干杯 戴尔

Answer 1

你可以为div分配一个唯一的id，并将选择器添加到css中的所有规则。

HTML之前

<div> 
     <!--start ajax content -->
     <a href="#"> Content </a> 
     <!--end ajax content -->
</div>

CSS之前

a {color:#999;}

HTML After

<div id="unique0001"> 
     <!--start ajax content -->
     <a href="#"> Content </a> 
     <!--end ajax content -->
</div>

CSS After

#unique0001 a {color:#999;}