如何调整 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;