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

【问题标题】：How can I embed a webpage within another and isolate CSS如何在另一个网页中嵌入网页并隔离 CSS
【发布时间】：2010-02-23 23:55:03
【问题描述】：

我需要在另一个网页中嵌入一个网页，内页将被 <div> 包裹，并且不包含 <html>、<head><title> 或类似的东西，但是内页可以包含 <link>' s到我不想影响外页的CSS

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

这与伪选择器之类的东西有明显的问题，但是，主要问题是外部页面的样式会影响内部页面，我无法合理地重置所有可能的样式，并且我需要访问内部页面 dom 所以使用iframe 是不可能的。

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

干杯戴尔

【问题讨论】：

【解决方案1】：

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

HTML 之前

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

CSS 之前

a {color:#999;}

HTML 之后

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

CSS 之后

#unique0001 a {color:#999;}

【讨论】：