Javascript 如何将一个网页嵌入另一个网页并隔离CSS

我需要在另一个网页中嵌入一个网页，内页将被一个

包装，不包含

，

或类似的内容，但是，内页可以包含

到CSS，我不想影响外页

我目前使用AJAX获取HTML并将其插入外部DOM，为了解决样式冲突，我在嵌入DOM之前提取任何链接，使用AJAX获取CSS，解析样式并使用jQuery选择器内联应用它们

这在伪选择器方面有明显的问题，但是，主要问题是外部页面的样式会影响内部页面，我无法合理地重置所有可能的样式，我需要访问内部页面dom，因此使用iframe是不可能的

这是一个相当复杂的设置，但我想知道是否有人见过类似的东西或有更好的方法

干杯

---

Dale

您可以为div分配一个唯一的id，并将选择器前置到css中的所有规则

以前的HTML

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

HTML后

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

---

你能控制内页和外页吗？如果你这样做，我会建议一个简单的解决方案。内部页面可以是任意的html，但我可以灵活处理，我完全控制外部页面。可能你有一些限制，但你是否尝试使用iframe而不是div，或者在div内？是的，这是我使用ajax获取css之前的原始解决方案，我可能会回到它，因为获取变得笨重，但它不能解决外部样式影响内部页面的问题。哎呀，我错过了关于不希望外部css影响内部html的部分。我不确定如果没有iframe或一些非常复杂的css重置是否可能。

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

#unique0001 a {color:#999;}