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 lo

Solution 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;