Resize a dynamically generated iframe

Question

I have a report generated by Oracle Apex (A UI tool operating against the Oracle database). I have customized it to have a hyperlink on each record, which when clicked opens a detail report in an iframe right under the current record. This, I am doing by using the Javascript insertRow method on the html table element (Condensed Javascript code below. Oracle APEX allows use of JS/Jquery)

            var pTable= html_CascadeUpTill(t,'TABLE');
        var myNewRow = pTable.insertRow(pTR.rowIndex+1);
    var myNewCell = myNewRow.insertCell(0);
            myNewCell.innerHTML = '<iframe src="detail report url" height="0"></iframe>';

In order to resize the height of the iFrame that is different for different detail records, I have the following code in the document).ready(function() of the page

            $('iframe').load(function()
            {
                setTimeout(iResize, 1000);
            }
function iResize()
        {
            // Iterate through all iframes in the page.
            for (var i = 0, j = iFrames.length; i < j; i++)
            {
var y=(iFrames[i].contentWindow || iFrames[i].contentDocument);
if (y.document)y=y.document;
var docHt = getDocHeight(y);
if (docHt)  iFrames[i].height = docHt + "px";                    
            }
        }
            );

Without the setTimeout call to iResize function, the iframe resize is not happening. But this setTimeout is adding a delay in the resized iframe to appear which I want to avoid. Is there a way to do this? All the related posts/articles I have seen online deal with iframes that are built into the page but not generated on-the-fly as in my case.

Let me know if you need more information. Please help. Thank you.

Answer 1

You should consider putting the details in a <div> block, then showing or hiding the <div> with JQuery. You can set dimensions for your block with CSS, or just let the content flow normally inside of the block. Sounds like a much simpler way to achieve the same effect.

Answer 2

The issue is that if you perform the resize too soon it will get the dimensions of the child document before it has been fully rendered, hence the use of a timer.

If your detail reports are other APEX pages that you control, then you could call the iResize function from the "Execute when page loads" section of the detail page:

parent.iResize();

That seems to work for me.

Answer 3

It sounds to me like the iframes don't even exist when the page first loads.

Instead of calling the iResize function on page load and then every second you could place the call to iResize in the code that creates the iframe.