从存储在数据库中的 HTML 呈现 iframe答案

【问题标题】：Rendering an iframe from HTML stored in the DB从存储在数据库中的 HTML 呈现 iframe
【发布时间】：2011-11-26 15:10:30
【问题描述】：

我有一个使用 Django 呈现的 HTML 模板。我传入了所有必要的上下文变量——my_heading 是标题，my_html 是标记安全的 html。我想在 iframe 中显示 my_html。

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

你知道怎么做吗？我发现的所有示例都显示了指向 URL 的 iframe。我在 HTML 和 JS 方面非常糟糕。 :|

谢谢

【问题讨论】：

标签： python html django iframe django-templates

【解决方案1】：

如果我理解正确，您只是想在 Django 模板中显示您使用 Python 动态准备的 HTML 内容，对吗？如果是这种情况，则不需要 iframe。仅当您想将不同 URI（网页）的部分集成为页面上的框架（网页上的部分）时，才需要 iframe。这是一个示例：

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

除了上面的代码，基于下面的评论。听起来您想显示带有 iframe 的整个页面，并且第二页来自您盒子上的另一个视图/url。然后使用：

<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

【讨论】：

嗨迈克尔。我一定遗漏了一些信息。我所说的 HTML 是一个包含所有 CSS、JS 等的整个页面。我认为我无法在div 中显示它，对吗？ div 适用于我需要显示的小型 HTML sn-p。希望我没看错。
是的，你是对的。如果要在标签中显示整个页面，则需要使用 iframe 标签。我将更改上面的代码。
看看我的回答。我设法以某种方式将它们全部破解。
太棒了。我很高兴您找到了自己问题的解决方案:-)
因此，如果您有一个可以加载但集成来自另一个 url 的数据的视图，如 iframe 示例所示，您将不得不使用 iframe，还是有其他选择？我一直在将它用于图像，但现在我也想将它用于纯文本/JSON 响应。

【解决方案2】：

Michael Klocker 没有回答您的问题，但他给出的答案是更好的解决方案。你应该这样做。

但要回答你的问题：你只能将 url 传递给 IFrame，所以如果真的想使用 IFrame，你需要在 django 中设置第二个 url+view 以返回 my_html 作为响应。 IE。将发生 2 个 http 请求。 1 用于包含 IFrame 的页面，1 请求用于 IFrame 的内容。

【讨论】：

【解决方案3】：

我用这个技巧来做到这一点。 div 被隐藏并包含 HTML。 IFrame 不指向某个位置，因为我不想要任何 CORS 问题。然后我将我的 HTML 注入其中。

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

【讨论】：