how to resize an iframe to fit the enclosing panel

问题

I am using PrimeFaces 3 for this.

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.

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.

Here is the template code:

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

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

回答1:

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.

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;

来源：https://stackoverflow.com/questions/7677460/how-to-resize-an-iframe-to-fit-the-enclosing-panel

标签

javascript

jsf-2

primefaces