html - 让 HTML Div 充当 iframe，但使用子项作为内容

Question

是否可以使用 HTML5 <div> (或任何其他元素)就像一个 iframe，但内容是从它的子元素而不是从 URL 加载的？例如，如果您要在主文档中进行此设置:

<iframe style='margin-left:50px;
    width:500px;
    height:500px;' src='foo.html'></iframe>

以及foo.html的内容是:

<div style='position:fixed;
    top:50%;
    left:50%;
    width:50%;
    height:50%;
    background-color:black;'></div>

主文档会显示一个黑色正方形，宽度和高度约为 250 像素，左侧有 300 像素左右的边距。如果 foo.html 中的脚本如果要更改正方形的大小或位置，则正方形的大小和位置将在 iframe 内发生变化，而不是在整个主文档内发生变化。

我感兴趣的是更像这样的事情:

<magicalframe style='margin-left:50px;
    width:500px;
    height:500px;'>
    <div style='position:fixed;
        top:50%;
        left:50%;
        width:50%;
        height:50%;
        background-color:black;'></div>
</magicalframe>

在哪里<magicalframe>作用类似于 iframe，但从其内部获取内容，而不是从 URL。从根本上说，我想要 <magicalframe> 的内容居中并调整自身大小，就好像 <magicalframe>是它的主体，而不是将主体或窗口作为一个整体来完成。

我猜对此有一个非常简单的解决方案。我说得对吗？

Answer 1

你可以这样做:

var iframe = document.getElementById('magicalframeid'),
    iframedoc = iframe.contentDocument || iframe.contentWindow.document;

iframedoc.body.innerHTML = 'your manual div contents';