tags:

views:

85

answers:

3

I am trying to display a "preview" of an HTML email. I have the HTML in my database and now I need to render it in an iframe, or popup window or something. I am trying to inject the html into a div tag on the page, but it won't display anything. Here is the problem I am running into (I have nested HTML tags):

<html>
    <body>
        <h1>My page</h1>
        <div id="email-body">
            <html>
                <body>
                    <p>email</p>
                </body>
            </html>
        </div>
    </body>
</html>
A: 

That won't work because you can't have two HTML structures in a document.

The only way to do this that I can see is using an iframe.

Pekka
That's what I was going to say. The only problem is you can't "inline" the content inbetween the `<iframe></iframe>` tags which means either a javascript only solution (not a good idea) or an extra page.
Andy E
@Andy true. But then, he may run into having to use extra pages anyway if those E-Mails contain any inline images - he'll have to extract those from the mail as well, and put into separate files. It could be, though, that that is not necessary in his scenario, it being a prewview function.
Pekka
+1  A: 

Assuming that the markup looks exactly like you showed in your post, you could just strip the tags out like this (run this on the email field after you get it from your db):
$email = preg_replace('/\<\/?(html|body)\>/', '', $email);

This will leave you just the body content of the email. This will work as long as the email doesn't have anything in between <html> and <body>, such as a <head> section.

ryeguy
Good idea, why didn't I think of that. +1. This will work only, though, if there is no CSS rules in the surrounding documenbt interfering with the Mail's presentation.
Pekka
Yeah, I know. OP, if you do have extra markup or something else that would cause this to fail, your next best bet is to use an XML parser to extract the content from the body tag.
ryeguy
+2  A: 

You can write HTML to a popup window.

var preview = window.open("", /* options */);
preview.document.write(html);
preview.document.close();

But like me, many dislike popup windows. Another consideration is to just display only the <body> contents. Even better, most mail clients just supports it. With a content type of text/html, you can send a HTML mail as if it is going to be part of a HTML <body>.

<p>email</p>

This way you can for preview just inject it in some div in the main page the usual way.

If you like to style elements, but dislike inline styles, you can also add <style> element. Most of those mail clients also just supports it.

<style>p { font-family: arial, sans-serif; }</style>
<p>email</p>

From HTML purist's view this is indeed syntactically invalid. But it works (also in webbrowsers!) and eases the stuff a lot up.

BalusC
Hey, this is a nice idea as well - but you'd have to escape (and re-unescape) the HTML that is getting written. You could apply the same logic to an IFRAME.
Pekka