javascript - 如何调整 iframe 的大小以适应封闭面板

Question

我为此使用 PrimeFaces 3。

我在 p:panel 中有一个 iframe 元素，该元素通过 p:resizable 组件得到增强。我想要的是在加载和调整大小事件时自动调整 iframe 的大小，使其适合面板的可用宽度和高度。

请注意，在此示例中，在 iframe 之前有一个包含一些文本的 p 元素。所以 iframe 的相对来源不是一个常量。

模板代码如下:

            <h1>Page To Test Stuff</h1>

            <script type="text/javascript">
                function doIFrame(event, ui) {
                    var frame = document.getElementById("tFrame");
                    // now what?
                }
            </script>

            <p:panel id="showit">
                <p>
                    What I need is for the following iFrame (id="tFrame") to
                    automatically resize to the max available space inside 
                    the surrounding panel.  This needs to happen when the
                    window is initially drawn, and when the user clicks and
                    drags the resize icon.
                </p>
                <iframe id="tFrame" 
                        src="http://www.apple.com" 
                        />
            </p:panel>
            <p:resizable for="showit" onStop="doIFrame(event, ui)"/>

我的 Javascript 水平很差，但我愿意学习。所以我只需要一条线索就可以开始。

Answer 1

可以通过 element.clientWidth 获取元素的客户端宽高和 clientHeight .您可以通过分配 element.width 来设置元素的宽度和高度和 element.height .

所以，这基本上应该做到这一点(大致；我正在考虑面板的默认 ~20px 填充，我还假设您删除了介绍性的 <p> ，否则您还必须考虑其客户端高度) :

var panel = document.getElementById("showit");
var frame = document.getElementById("tFrame");
frame.width = panel.clientWidth - 40;
frame.height = panel.clientHeight - 40;