How can I embed a webpage within another and isolate CSS

Question

I need to embed one webpage within another, the inner page will be wrapped by a <div> and not contain the html,head title or stuff like that, however the inner page can contain <link>'s to css that I dont want to affect the outer page

I currently fetch the html with ajax and insert it into the outer dom, to workaround the styles conflicting I extract any links prior to embedding into the dom, fetch that css with ajax, parse the styles and apply them inline using jquery selectors.

That has obvious problems with things like psuedo selectors, however the main problem is that styles from the outer page affect the inner page, I cant reasonably reset every possible style, and I need to access the inner pages dom so using an iframe is out of the question.

Its a fairly complex setup, but I was wondering if anyone had seen anything along similiar lines or had a nicer approach.

Cheers Dale

Answer 1

You could assign a unique id to the div and prepend the selector to all the rules in the css.

HTML Before

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

CSS Before

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