jQuery 对话框：在内容加载到其 iframe 后设置大小答案

【问题标题】：jQuery dialog: setting size after content is loaded into its iframejQuery 对话框：在内容加载到其 iframe 后设置大小
【发布时间】：2025-11-26 18:05:01
【问题描述】：

我在这里解决了一个谜。我有以下代码，当内容加载到 jQuery 对话框中的 iframe 时调用。我想根据内容适当地设置对话框大小。用于设置对话框宽度和高度的前两行（已注释）有效，但后两行（未注释）不起作用（显示高度略小于应有的高度，内容垂直溢出，宽度正常）。即使两个断言都通过了，这也是真的，这意味着第三个参数应该具有相同的值，无论我使用 oO 的两个版本中的哪个版本。有什么建议怎么可能？

frameElem.load(function() {
    frameDoc = frameElem.contents();
    var boxWidth = Math.min($(window).width(), frameDoc.width());
    var boxHeight = Math.min($(window).height(), frameDoc.height());
    console.assert(boxWidth == frameDoc.width());
    console.assert(boxHeight == frameDoc.height());

    //works correctly:
    //$(boxElem).dialog('option', 'width', frameDoc.width());
    //$(boxElem).dialog('option', 'height', frameDoc.height());

    //does not work
    $(boxElem).dialog('option', 'width', boxWidth);
    $(boxElem).dialog('option', 'height', boxHeight);

    $(boxElem).dialog('option', 'position', 'center');
    $(boxElem).dialog('open');
});

我尝试提供 jsfiddle 但无法执行 iframe 部分:(.

编辑：奇怪的是，如果我查看对话框元素，它有 height: auto;和宽度： 677px 在两个版本中的样式。所以设置高度有问题。

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案1】：

所以问题是这会打印两个不同的高度。先是 543，然后是 586

    console.log(frameDoc.height());
    $(boxElem).dialog('option', 'width', frameDoc.width());
    console.log(frameDoc.height());

不知道为什么，但至少现在这种行为是有意义的。

【讨论】：