How to display html email in the browser without it changing my bg colors and altering my table

Question

In a new app, I'm building, I want to display an html email in a table in the browser.

The issue is that the html emails are changing the background color of my webpage and at times ends an html table I am using to display multiple emails.

The emails usually contain full html, body, div, and table tags. A normal occurrence is an body bgcolor"ff0000" which turns my entire app's background red.

Is there a way to combat this or do I have to code it to take out the html tags.

Also, I tried showing the email code in a iframes, but to no avail. it actually didn't display the code at all, just a blank iframe box.

<iframe>Body of html email here</iframe>

I'm sure I'm missing something simple - any help would be appreciated.

Btw, the email html is being held in a php string.

Solution 1

what you can do is use javascript to inject the HTML of the email into the iFrame. The reason it changes your backgrounds is because you've got global styles in the stylesheet for the email, and they are getting applied to the rest of the page.

$('#loader_frame')[0].contentDocument.body.innerHTML = YOUR HTML

Solution 2

The content inside the tag is displayed if the browser doesn't support iframes. To use the iframe correctly, you should set the src attribute:1

<iframe src ="html_intro.asp" width="100%" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

In practice, you could have this src attribute be a url that retrieves the body of the email. For example:

<iframe src="getemail.php?id=12345" width="100%" height="300"></iframe>

Where your getemail.php script takes the requested id and returns the html results which are displayed in the frame.