Question

我有一个HTML模板，我正在使用Django进行渲染。我传递了所有必要的上下文变量 - 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来说太可怕了。：|

由于

Answer 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显示一个整个页面，而这个第二页来自你的盒子上的另一个视图/网址。然后使用：

<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

Answer 2

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

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

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

从存储在DB中的HTML渲染iframe

3 个答案: