如何调整iframe的尺寸以适合封闭面板 [英] how to resize an iframe to fit the enclosing panel

问题描述

我正在为此使用PrimeFaces 3.

I am using PrimeFaces 3 for this.

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

I have an iframe element inside a p:panel which is enhanced with a p:resizable component. What I want is to automatically resize the iframe on load and on resize event so that it fits the available width and height of the panel.

请注意，在此示例中，在 iframe 之前有一个 p 元素，其中包含一些文本.因此， iframe 的相对原点不是一个常数.

Note that in this example, there is a p element with some text in it before the iframe. So the relative origin of the iframe isn't a constant.

这是模板代码:

            <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)"/>

我的Java语言能力很烂，但我愿意学习.因此，我只需要一条线索就可以入门.

My Javascript proficiency sucks but I am willing to learn. So I don't need more than a clue to get started.

推荐答案

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

You can get the element's client width and height by element.clientWidth and clientHeight. You can set the element's width and height by assigning element.width and element.height.

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

So, this should basically do it (roughly; I'm taking panel's default ~20px padding into account and I also assume that you removed that introductory <p>, else you have to take its client height into account as well):

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

这篇关于如何调整iframe的尺寸以适合封闭面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！