Home/ Questions/Q 6654809
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T01:26:03+00:00

I have a HTML template that I’m rendering using Django. I’m passing in all

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0