Rendering an iframe from HTML stored in the DB

Question

I have a HTML template that I'm rendering using Django. I'm passing in all the necessary context variables — my_heading is the heading, my_html is the mark-safed html. I'd like to display my_html in the iframe.

<html>
    <head>
        <title>Iframe Example</title>
    </head>
    <body>
        <p>{% my_heading %}</p>
        <iframe name="iframe1" width="600" height="400" src="http://www.yahoo.com" frameborder="yes" scrolling="yes"></iframe>
    </body>
</html>

Would you know how to do this? All the examples I've found show the iframe pointing to a URL. I'm god-horrible at HTML and JS. :|

Thanks

Gary van der Merwe · Accepted Answer · 2011-09-28 08:06:49Z

3

Michael Klocker does not answer your question, but the answer he has given is a better solution. You should rather do that.

But to answer you question: You can only pass a url to a IFrame, so if really want to use a IFrame, you need to set up second url+view in django to return my_html as the response. I.e. 2 http requests will happen. 1 for the page containing the IFrame, and 1 request for then contents of the IFrame.

answered Sep 28, 2011 at 8:06

Gary van der Merwe

9,6524 gold badges58 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michael · Accepted Answer · 2011-09-28 08:51:23Z

3

If I understand you correctly, you just want to show the HTML content that you prepared dynamically with Python within the Django template, correct? If that is the case, you do not need an Iframe. Iframes are only necessary if you would like to integrate parts of a different URI (webpage) as a frame (section on your webpage) on your page. Here a sample:

<html>
<head>
    <title>Iframe Example</title>
</head>
<body>
    <p>{% my_heading %}</p>
    <div id="content">{% my_html %}</div>
</body>
</html>

Addition to the above code, base on comment below. Sounds like you want to show an entire page with an Iframe and that this second page comes form another view/url on your box. Then use:

<html>
<head>
    <title>Iframe Example</title>
</head>
<body>
    <p>{% my_heading %}</p>
    <iframe src="URL_TO_MY_2ND_VIEW_IN_DJANGO" width="100%" height="300"></iframe>
</body>
</html>

Iframe explanation on W3Schools

Iframe description on W3C Site

edited Sep 28, 2011 at 8:51

answered Sep 28, 2011 at 7:46

Michael

7414 silver badges8 bronze badges

5 Comments

Mridang Agarwalla Over a year ago

Hi Michael. I must've omitted some information. The HTML that I'm speaking to is an entire page with all the CSS, JS, etc. in it. I don't think I'll be able to display that in a div, would I? The div would fine for a small HTML snippet that I needed to display. Hopefully I got this correct.

Michael Over a year ago

Yes, you are correct. If you want to display an entire page within a tag, you need to use the Iframe tag. I will change my code above.

Mridang Agarwalla Over a year ago

Have a look at my answer. I managed to hack it all together somehow.

Michael Over a year ago

That's awesome. I am glad you found a solution to your own question :-)

radtek Over a year ago

So if you have a view that loads up but integrates data from another url as shown in your iframe example, you would have to use the iframe, or is there another option? I have been using this for images, <img src="{% url 'loc_key_png' location.id key %}"> but now I wanted to use it for plain text /JSON responses as well.

Mridang Agarwalla · Accepted Answer · 2011-09-28 12:48:35Z

I used this hack to do it. The div is hidden and contains the HTML. The IFrame doesn't point to a location because I don't want any CORS issues. I then inject my HTML into it.

<html>
    <head>
        <title>Iframe Example</title>
    </head>
    <body>
        <p>{% my_heading %}</p>
        <iframe name="iframe2" id="iframe2" width="0" height="0" src="" style="border:0px; overflow-x:hidden;"></iframe>
        <div id="page" style="display:none" >{{ my_html }}</div>

        <script type="text/javascript">

          function getWindow(iframe) {
              return (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument;
          }

          getWindow(document.getElementById('iframe2')).document.open();
              getWindow(document.getElementById('iframe2')).document.write(document.getElementById('page').innerHTML);
          getWindow(document.getElementById('iframe2')).document.close();

          document.getElementById('iframe2').style.height = (getWindow(document.getElementById('iframe2')).document.body.scrollHeight + 20) +"px";
          document.getElementById('iframe2').style.width = (document.getElementById('iframe2').parentNode.offsetWidth) +"px";

        </script>
    </body>
</html>

Collectives™ on Stack Overflow

Rendering an iframe from HTML stored in the DB

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related