根据 iframe 内加载的内容自动调整 div/iframe 的大小

Question

我在网上看到了很多相互矛盾的信息，我认为这里的人们比绝大多数其他地方的人更了解。

是否可以有一个带有 iframe 的 div 自动调整宽度（可能还包括高度）->WITHOUT<- 使用 javascript.. 还需要具有跨浏览器功能（浏览器像 lynx 和 ie5 根本不是问题）。

几天来我一直在网上修改并遵循各种人的建议，但我仍然没有看到我的 div 和 iframe 将其宽度限制为 iframe 中加载的任何数据（只是随机信息表）。

这是我拥有的一些 css 和相关的 html，你可以看出它已经经历了一些没有 width:auto; 的修订。高度：自动等

            div#topleftdiv
                {
                    float: left;
                    width: 25%;
                    height: auto;
                }

            iframe#topleftframe
                {
                    background-color: transparent;
                    -moz-opacity: .00;
                    filter: alpha(opacity=00);
                }


            div#toprightdiv
                {
                    float: right;
                    width: 25%;
                    height: auto;
                }

            iframe#toprightframe
                {
                    background-color: transparent;
                    -moz-opacity: .00;
                    filter: alpha(opacity=00);
                }

            div#topmiddlediv
                {
                    float: left;
                    width: 49%;
                    height: auto;
                    text-align: center;
                    align: center;
                    margin-left: auto;
                    margin-right: auto;
                }

            iframe#topmiddleframe
                {
                    width: 100%;
                    height: 40em;
                    text-align: center;
                    align: center;
                    margin-left: auto;
                    margin-right: auto;
                    -moz-border-radius: 15px;
                    border-radius: 15px;
                }

            div#bottomdiv
                {
                    clear: both;
                }

---

<div id="topleftdiv" scrolling="no">
    <iframe id="topleftframe" name="topleftframe" scrolling="no"  allowtransparency="true" frameBorder="0">
    </iframe>
</div>
<div id="toprightdiv" scrolling="no">
    <iframe id="toprightframe" name="toprightframe" scrolling="no" allowtransparency="true" frameBorder="0">
    </iframe>
</div>
<div id="topmiddlediv" scrolling="no">
    <iframe id="topmiddleframe" name="topmiddleframe" scrolling="no" allowtransparency="true" frameborder="0" noresize>
    </iframe>
</div>

Answer 1

不，这是不可能的。您需要 JavaScript 将帧大小传达回父窗口。

基本的 JavaScript，如果您改变主意的话：

来自 iFrame：

parent.document.getElementById('iframe_id').style.height =
    document.body.offsetHeight;