2

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 don't 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 pseudo-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 similar lines or had a nicer approach.

Cheers Dale

3
  • Do you have control over the inner and outer page? If you do I will suggest a somewhat simple solution. Feb 24, 2010 at 0:01
  • the inner page can be be arbitrary html, but I can be flexible about it, I have full control of the outer page. Feb 24, 2010 at 0:13
  • 1
    May be you have some constraints, but did you try using an iframe instead of a div, or inside the div?
    – Mic
    Feb 24, 2010 at 0:30

1 Answer 1

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;}
2
  • yup that was the original solution before I fetched the css with ajax, I may go back to it since the fetch is becoming clunky but it doesnt solve the problem of outer styles affecting the inner page. Feb 24, 2010 at 0:23
  • Oops, I missed the part about not wanting the outer css to affect the inner html. I'm not sure if it is possible without an iframe or some very complex css resets.
    – timrwood
    Feb 24, 2010 at 0:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.