如何使用 iframe 正确调整 jQuery.ui 对话框的大小答案

【问题标题】：how to properly size jQuery.ui dialog with an iframe如何使用 iframe 正确调整 jQuery.ui 对话框的大小
【发布时间】：2010-07-09 09:59:48
【问题描述】：

当我打开具有预定义大小（例如 800x600）的 jQuery 对话框时，对话框中的 iframe 未正确调整大小。看起来它具有默认大小。其实高度还可以，但宽度似乎无缘无故停留在300px。

我正在创建这样的 iframe 和对话框：

someVar = '<iframe id="some-dialog" class="window-frame" src="http://example.com/"></iframe>';

someVar.dialog
    ({
        title: command.buttonText,
        autoOpen: false,
        modal: false,
        resizable: true
    })
    .dialog('option', 'width', 800)
    .dialog('option', 'height', 600);

我试过把宽度和高度放在初始化调用中，结果是一样的。如果我省略这两个，对话框会使用默认值初始化，随后调整大小可以正常工作。

任何想法都会有所帮助...

更新：

我将 iframe 包装在一个 div 中，然后使用标准调用创建了对话框：

someVar.dialog
    ({
        title: command.buttonText,
        autoOpen: false,
        modal: false,
        resizable: true,
        width: 800,
        height: 600
    })

不是一个真正的解决方案，但它有效......（虽然感觉很脏！）

【问题讨论】：

标签： jquery iframe dialog resize size

【解决方案1】：

我通过向 IFrame 添加一些样式来解决它：

iframe#some-dialog {
    width: 100% !important;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

【讨论】：

【解决方案2】：

someVar = '<iframe id="some-dialog" class="window-frame" src="http://example.com/"></iframe>';

someVar.dialog({
  title: command.buttonText,
  autoOpen: false,
  modal: false,
  resizable: true,
  width:800,
  height:600
}).width(800-10).height(600-10);

编辑：也许我不明白你的意思。无论如何，请检查
Demo:

【讨论】：

我已经检查了你的演示，是的，你理解我的正确。我不确定为什么它不起作用，所以我最终将 iframe 包装在一个 div 中并使用 CSS 使其看起来正确。在对话框初始化之后，我什至不需要对 width() 和 height() 的额外调用。我仍然会通过接受你的答案来奖励你的努力，因为它应该工作，就像我问题中的代码一样...... >_>