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>

主文档似乎显示一个约250px宽度和高度的黑色正方形，左边有300px左右的边距。如果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';

Answer 2

除非我误解了你想要的东西，否则你好像可以把它放在

transformX: 0;

在父母身上。

未尝试，但是从位置上的MDN：修复：'不要为元素留出空间。相反，将其放置在相对于屏幕视口的指定位置，并且在滚动时不要移动它。打印时，将其放置在每页的固定位置。此值始终创建新的堆叠上下文。当一个祖先将transform属性设置为不同于none时，则此祖先用作容器而不是视口'

但似乎你从父母那里获得完全相同的功能：

position: relative;

和一个

的孩子

position: absolute;

除非你打算在父母中滚动。

编辑：无论哪种方式，你可能想要

overflow: hidden;

也是父母。

将HTML Div作为iframe，但使用儿童作为内容

2 个答案: