iframes using directly html code, no source

Question

I would like to embed HTML code into a html page. The styles from the HTML embeded code is disturbing the complete layout, that´s why I want to use iframes. The problem is that there is no .html page to link to, because this HTML code is comming from the database. I have tryed something like:

<iframe>${htmlContent} </iframe>

Where ${htmlContent} contains a simple html content.

<html> <head> <title></title> </head> <body> </body> </html>

Can you have a second page that generated the HTML from the database, and link to it through the src of the iframe? — freefaller
– freefaller, Commented Aug 29, 2012 at 14:54
Thet would be the easy way, but not the best one. I would prefer to so something directly with the HTML code. Thanks — Blanca Hdez
– Blanca Hdez, Commented Aug 29, 2012 at 14:56

freefaller · Accepted Answer · 2012-08-29 15:27:00Z

This answer assumes you're able to strip out the <html> and </html> tags from your stored HTML, and are able to HtmlEncode it when placing into the your markup.

Store the encoded HTML into something like a div...

<div id="htmlstore" style="display:none;">{html goes here}</div>

So it looks something like...

<div id="htmlstore" style="display:none;">&lt;body&gt;This is my text&lt;/body&gt;</div>

Then use the following Javsacript, which will "HtmlDecode" (there is no native javascript function to do this unfortunately) and then place into the iframe

<script type="text/javascript"> window.onload = function(){ var html = document.getElementById("htmlstore").innerHTML; html = html.replace(/&lt;/g,"<").replace(/&gt;/g,">"); var frameDoc = document.getElementById("newframe").contentWindow.document; frameDoc.documentElement.innerHTML = html; } </script>

Thanks. That was what I needed. But I have two questions: 1. By changing < by < and > by > we avoid that even under display:none the general layout is disturbed, is that right? 2. Why should I strip out <html> </html> tags? Even with them, the functionality works. Thanks
Hi @Blanca. Yeah, the encoding of the HTML stops anything happening within the main page, because if you can't guarantee the contents of the HTML it could easily mess things up. The reason for stripping out the <html> was because I couldn't figure out a way of replace the entire structure in the iframe with the new HTML. The way I've done it is to replace the structure within the HTML of the iframe... otherwise the browser could complain about having <html><html><body>...</body></html></html> if that makes sense.
Something else I thought of @Blanca, after this was the you probably don't want to run an actual HtmlEncode on the HTML to start with, otherwise things like & will come out in the iframe as &. So you probably want to simply convert the < and > alone. Either that or use a javascript library that does proper HtmlDecoding, which jQuery will allow you to do apparently

Collectives™ on Stack Overflow

iframes using directly html code, no source

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related