javascript - 将 JQuery 模态对话框动态调整为 IFrame 内容

Question

我有一个带有内部 iFrame 的 JQuery 对话框，它使用一个 php 文档来填充图像和一些信息。它工作正常，但如果我单击其中一个图像转到完整尺寸的图像并将其显示在 iFrame 中，对话框不会调整大小。

这就是 iframe 和对话框的创建方式，我删除了一些额外的代码，但重要的是:

$('<iframe id="frameProductos" width="100%" src="articulos_info.php?codigo_art='+val+'" name="frameProductos">').appendTo('body');

                  var dialog = $("#frameProductos");

                 dialog.dialog({
                      title: 'Revisión de producto',
                      resizable: false,
                      modal: true,
                      position: ['center',150],
                      overlay: {
                          opacity: 0.5,
                          background: "black"
                      },
                      open: function( event, ui ) {

                          $('#frameProductos').width('100%');
                      },
                     close: function( event, ui ) {
                         $(this).dialog('destroy').remove();
                     },
                      width: 500,
                      height: 500,
                      buttons: {
                          "Cerrar": function () {
                              $(this).dialog('destroy').remove();

                          }

                      }
                  });

我需要对话框和 iFrame 在内容大小改变时改变它们的大小(当图像被点击时，全分辨率图像出现)。

Answer 1

重要提示:加载完成后必须更新iframe的大小

    $(document).ready(function () {
        //do somthing like this
        window.parent.resizeIframe();
    });