include html email in html file

Question

I want to show a html email inside my html page

Thats is my simplified index.html

<!DOCTYPE html>
 <html class="no-js" lang="">
 <head></head>
 <body>
    <div id='email_goes_here'></div>
 </body>
 </html>

And that the beginning of my email.html

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
    <head>
        ....

I want to put the code from email.html inside the div#email_goes_here from index.html.

Is it valid to just copy and paste the code in the div? I am not sure if its valid html to have 2 <!DOCTYPE html> and 2 <html> tags. If its not valid, how could I display the html page inside another html page? Any approach using PHP or jQuery would be fine.

I was looking for this problem, but I didnt find anything. I only found the question how to include some html content in anoter html file, but not how to include a complete html page. Here are the links that I found:

Include another HTML file in a HTML file

view html page inside another html

How do I load an HTML page in a <div> using JavaScript?

How to include an HTML page into another HTML page without frame/iframe?

`I am not sure if its valid html to have 2 and 2 tags` No it's not, you need to include only one of each. To solve this look in to using Server Side Includes. This is very easy in PHP. — Rory McCrossan, Feb 22 '17 at 08:32

Rounin - Standing with Ukraine · Accepted Answer · 2017-02-22T08:47:38.647

1

Your simplest approach will be to use <iframe>.

If you use the srcdoc attribute, you will avoid having to set up any external html documents.

Working Example:

<iframe srcdoc="
<html>
<head>
<style>p{color: rgb(255,0,0);}</style>
</head>

<body>
<p>This is an example of an <code>iframe</code> which uses the <code>srcdoc</code> attribute.</p>
</body>
</html>
">
</iframe>

Further Reading: https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe

edited Feb 22 '17 at 08:47

answered Feb 22 '17 at 08:32

Rounin - Standing with Ukraine

24,408
7
69
89

1

iframes are not supported in mobile browsers, guess it should be pointed out. – Michael Di Prisco Feb 22 '17 at 08:36
2

Using an iframe also increases the number of HTTP requests to the server. Something definitely worth considering if you have a high-volume site, or slow server – Rory McCrossan Feb 22 '17 at 08:38
@MichaelDiPrisco - the iframe in the example above _is_ working on my mobile browser. (Firefox for Android). – Rounin - Standing with Ukraine Feb 22 '17 at 08:46
@RoryMcCrossan - using an iframe will not increase the number of HTTP requests to the server if you use the `srcdoc` attribute. – Rounin - Standing with Ukraine Feb 22 '17 at 08:50
Thank you. This almost works. I only have the problem that I have many `'` and `"` marks inside my html. Do I need to replace one of them, or is there a better way? – Adam Feb 22 '17 at 08:52
Okay I figured it out with buffer + include + htmlspecialchars – Adam Feb 22 '17 at 08:56
Watch out for browser support. Googling it, I found out Microsoft IE / Edge do not support srcdoc. – Michael Di Prisco Feb 22 '17 at 08:57
@Rounin true, although in this case that would be effectively the same using a server side include anyway rendering the point of the iframe pretty redundant. – Rory McCrossan Feb 22 '17 at 08:58
@RoryMcCrossan - I've never (yet) used it in production, but surely the use-cases for `iframe + srcdoc` are quite different from those of server side includes? For instance, being able to package styles and scripts and markup together in a single self-contained block? – Rounin - Standing with Ukraine Feb 22 '17 at 09:09

score 1 · Answer 2 · answered Feb 22 '17 at 08:35

Short answer: Use PHP.

There are many ways to include your pages inside others. Copy-paste won't be a good thing to do as, you guessed it, two html declarations can't be in the same page.

You could use an <iframe>, but looking at how browsers are starting to drop those, a more viable way is using PHP include or require. Of course, even with this method, two html declarations aren't allowed, so you'll have to "clean" your email.html file.

EDIT: Forgot to point it that iframes aren't allowed in mobile browsers, so you will lose those if you use iframes.

score 0 · Answer 3 · answered Feb 22 '17 at 08:33

0

You can try to use iframe : https://developer.mozilla.org/fr/docs/Web/HTML/Element/iframe It permit to have one page inside another, but have some limitations.

answered Feb 22 '17 at 08:33

Oreste Viron

3,262
3
21
33

2

iframes are not supported in mobile browsers, guess it should be pointed out. – Michael Di Prisco Feb 22 '17 at 08:36

score 0 · Answer 4 · answered Feb 22 '17 at 08:37

0

Another way to do this more properly would be to use some javascript framework that are made to do reusable components (like Angular.js or React.js). And use your email page as a component. It will be longer to learn though.

answered Feb 22 '17 at 08:37

Oreste Viron

3,262
3
21
33

score 0 · Answer 5 · answered Feb 22 '17 at 08:38

0

You can use HTML tag to embed another document within the current HTML document.

Read more: https://www.w3schools.com/TAGs/tag_iframe.asp

answered Feb 22 '17 at 08:38

Duy Tran

121
4

iframes are not supported in mobile browsers, guess it should be pointed out. – Michael Di Prisco Feb 22 '17 at 08:43

include html email in html file

5 Answers5