调整动态生成的 iframe 的大小

Resize a dynamically generated iframe

本文关键字：iframe 动态 调整      更新时间：2023-09-26

我有一个由Oracle Apex（针对Oracle数据库运行的UI工具）生成的报告。我已将其自定义为在每条记录上都有一个超链接，单击该超链接时，该超链接会在当前记录正下方的 iframe 中打开详细报告。这是，我通过在html表元素上使用Javascript insertRow方法来做到这一点（下面的精简Javascript代码。Oracle APEX允许使用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>';

为了调整不同详细记录不同的iFrame高度，我在文档中有以下代码）.ready（函数（） 

            $('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";                    
            }
        }
            );

如果没有对 iResize 函数的 setTimeout 调用，iframe 大小调整不会发生。但是这个setTimeout在调整大小的iframe中添加了一个延迟，我想避免这种情况。有没有办法做到这一点？我在网上看到的所有相关帖子/文章都涉及内置在页面中的 iframe，但不像我的情况那样即时生成。

如果您需要更多信息，请告诉我。请帮忙。谢谢。

您应该考虑将详细信息放在

块中，然后使用 JQuery 显示或隐藏
。您可以使用 CSS 为区块设置尺寸，或者只是让内容在区块内正常流动。听起来像是实现相同效果的更简单的方法。

问题是，如果您过早地执行大小调整，它将在子文档完全呈现之前获得子文档的尺寸，因此使用计时器。

如果您的详细信息报告是您控制的其他 APEX 页面，则可以从详细信息页面的"页面加载时执行"部分调用 iResize 函数：

parent.iResize();

这似乎对我有用。

在我看来，

当页面首次加载时，iframe甚至不存在。

而不是在页面加载时调用 iResize 函数，然后每秒调用一次，您可以在创建 iframe 的代码中调用 iResize。

相关文章：