Best way to display a web page within a web page?

Question

I'm writing a webmail product and some emails have body css that changes the background ... so when I Html.Decode() that emailbody, it's altering the CSS of the entire page.

Is there a good way to contain that problem?

Answer 1

A common way is to use iframe, although i'm not sure this is applicable for your problem.

Basically it loads a different html page inside another page. Which makes it independent, but it does mean you have 2 pages to display one email.

http://www.w3schools.com/TAGS/tag_iframe.asp

Answer 2

The answer to your question is probably "iframe", but in your specific situation, writing a webmail client is going to introduce you to a wonderful new hell called "stripping css from possibly extremely invalid html generated by a large variety of clients that all have their own ideas about what kind of html should be allowed in an email".

Good luck!

Answer 3

You can make your CSS more specific than the email's rules. For example:

body.body is more specific than .body or body

Any styles in body.body that clash with those in the lesser examples above, will override. But to stop the styles merging together, you'll need to define every single style.

Alternatively you can go with rewriting the CSS in the emails, which is the way most webmail/desktop email clients go these days, one way or the other. If you prefix all the rules with #emailMessage, for example, and place the email inside a <div id="emailMessage"></div> tag, all the styles in the email will only apply inside that namespace.

Using an iframe to display emails only introduces more problems based around accessibility, etc etc. Good luck.