Question

我正在使用PrimeFaces 3.

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

请注意，在此示例中，有一个 p 元素，其中包含 iframe 之前的一些文字。所以 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;

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

1 个答案: