Having a problem with iframe resizing when the iframe body is a jsp file which contains a dynmically built ajax table.

Users select different options from a drop down. All but 1 is a standard static jsp file. The other is a jsp file with a dynamic ajax table which is generated the second the user select this option from the drop down. Problem is the javascript is not getting the correct height for the dyanmically ajaxed jsp file.

Here is the iframe which is loading the contents file.

<iframe id="Editor" name="Editor" src="" scrolling="no" frameborder="0" allowtransparency="true" onLoad="resizeIframeToFitContent(this)"></iframe>

resize call:

function resizeIframeToFitContent(iframe) {
 iframe.height = Editor.document.body.scrollHeight + 300;
 iframe.width = Editor.document.body.scrollWidth;
 } // resizeIframeToFitContent

As a current workaround I am adding 300 manually to the height this works but throws the height of the normal jsp files well out and makes the page to tall.

Any ideas?

My guess is that onLoad="resizeIframeToFitContent(this) fires before the AJAX request has been satisfied, so calculates new height based on the served (pre AJAX) rendering of the page.

A workaround would be to get the AJAX response handler to call resizeIframeToFitContent() as its last statement before returning.

By leaving onLoad="resizeIframeToFitContent(this) in place for the other JSPs, the function would be called twice but maybe this is something you could live with. I doubt the extra processing time will be noticable. If it is noticable (or gives an odd visual effect) then I'm sure there must be some simple way to suppress the first call. Testing the URL of the loaded page would be unsophistocated but simple to implement.


Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.