根据 iframe 内容调整对话框的大小

Question

嗨，伙计们，我已经为此绞尽脑汁了 2 天。

似乎想不出解决方案

小提琴

$(function(){
    $('a').on('click', function(e){
        e.preventDefault();
        $('<div/>', {'class':'myDlgClass', 'id':'link-'+($(this).index()+1)})
        .html($('<iframe/>', {
            'src' : $(this).attr('href'),
            'style' :'width:100%; height:100%;border:none;'
        })).appendTo('body')
        .dialog({
        'title' : $(this).text(),
        width : 450,
        height : 350,
            buttons: [ { 
                    text: "Close",
                    click: function() { $( this ).dialog( "close" ); } 
                } ]
        });
    });
});

iframe 会自动调整大小为 100%，但对话框不会自动调整大小。 我不想要页面滚动器。 在自动调整大小对话框中尝试了很多序列，但没有任何效果。

我有与 href 链接的内部 php 表单，所有表单都会有所不同，并且需要对话框根据 iframe 大小调整大小。我确实有css，所以格式化用户表单不是问题，它们都在DIV中

问题是对话框滚动条。

我做错了什么？

Answer 1

我已经更新了你的小提琴：http://jsfiddle.net/NMJCw/2/

resize: function (event, ui) {
   var heightDifference = 50;
   var widthDifference = 50;
   $('iframe').height($(this).height() - heightDifference);
   $('iframe').width($(this).width() - widthDifference);
},

使用对话框的 resize 事件，您可以设置 iframe 宽度和高度。我还添加了两个变量，它们是 iframe 和对话框之间的维度差异 - 您需要计算正确的值并更改它们。

此外，在调整大小时，有时会有一个奇怪的滚动条。也许您可以检查它并设置一些溢出：隐藏（我还没有找到正确的元素来设置溢出）。