как изменить размер фрейма так, чтобы он подходил к закрывающей панели - PullRequest
Новая
       6

как изменить размер фрейма так, чтобы он подходил к закрывающей панели

1 голос
/ 06 октября 2011

Для этого я использую PrimeFaces 3.

У меня есть элемент iframe внутри p: панели , который расширен с помощью p: изменяемого размера компонент.Я хочу автоматически изменить размер iframe при загрузке и событии изменения размера, чтобы он соответствовал доступной ширине и высоте панели.

Обратите внимание, что в этом примере есть *Элемент 1013 * 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 - отстой, но я готов учиться.Поэтому мне не нужно ничего, кроме подсказки, чтобы начать.

1 Ответ

3 голосов
/ 06 октября 2011

Вы можете получить ширину и высоту клиента элемента на 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;
...