Load jquery ui dialog box with iframe and resize iframe and dialogbox to fit iframe height and width

I am doing runtime creating div for dialogbox and loading iframe with dynamically change url.

My problem is after iframe load inside jquery-ui dialog box i would like to resize both iframe to fit its content height and widht and then after resize dialog box.

Below is my javascript function using jquery.

function OpenNewWindowInDialogBox(URL, dialogTitle) {

// jquery dialogbox
(function ($) {

    if ($(".popupwindow").size() > 0) {
        $(".popupwindow, .temppopupwindow").remove();
    }

    //var win = $("<div class='popupwindow'><img id='imgComputerWorking' src='images/loading.gif' /></div>");
    var win = $("<div class='popupwindow'></div>");
    win.dialog({ title: dialogTitle, autoOpen: true,
        resizeStart: function (event, ui) {
            var d = $('<div class="iframeCover" style="zindex:99;position:absolute;width:100%;top:0px;left:0px;height:' + $("body").height() + 'px"></div>');
            $("body").append(d);
        },
        resizeStop: function (event, ui) {
            $('.iframeCover').remove();
        },
        dragStart: function (event, ui) {
            var d = $('<div class="iframeCover" style="zindex:99;position:absolute;width:100%;top:0px;left:0px;height:' + $("body").height() + 'px"></div>');
            $("body").append(d);
        },
        dragStop: function (event, ui) {
            $('.iframeCover').remove();
        },
        open: function (event, ui) {
            var ifrm = $("<iframe id=\"popupiframe\" scrolling=\"no\" marginwidth=\"0\" marginheight=开发者_StackOverflow\"0\" frameborder=\"0\" vspace=\"0\" hspace=\"0\" style=\"overflow:visible;  width:100%;\" />");
            win.append(ifrm);

            showLoading();

            ifrm.src(URL, function () { // .src is jquery function jqeryu.iframe.js file
                HideLoading();

                var getFFVersion = navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1];
                var FFextraHeight = parseFloat(getFFVersion) >= 0.1 ? 16 : 0; //extra height in px to add to iframe in FireFox 1.0+ browsers

                if (!window.opera) {
                    ifrm[0].style.display = "block";
                    if (ifrm[0].contentDocument && ifrm[0].contentDocument.body.offsetHeight) //ns6 syntax
                        ifrm[0].height = ifrm[0].contentDocument.body.offsetHeight + FFextraHeight;
                    else if (ifrm[0].Document && ifrm[0].Document.body.scrollHeight) //ie5+ syntax
                        ifrm[0].height = ifrm[0].Document.body.scrollHeight;
                }

                var iframeDoc = ifrm[0].contentDocument || ifrm[0].contentWindow && ifrm[0].contentWindow.document;

                if (!iframeDoc) {
                    return;
                }

                var docWidth = iframeDoc.width;
                var docHeight = iframeDoc.height;

                var scrollWidth = iframeDoc.documentElement.scrollWidth;
                var scrollHeight = iframeDoc.documentElement.scrollHeight;

                var iframeNewWidth = (docWidth && docWidth >= scrollWidth ? docWidth : scrollWidth + 15);
                var iframeNewHeight = (docHeight && docHeight >= scrollHeight ? docHeight : scrollHeight + 15);

                win.dialog("option", "height", iframeNewHeight + 30);
                win.dialog("option", "width", iframeNewWidth + 30);
                win.dialog({ position: 'center' });
            });

        }
    }); //.dialog({ position: ['right', 'top'] }); 

})(jQuery);}

Its work fine in Chrome but not work well in IE and FireFox.

Thanks in advance.

try it in this way...

resizeStart: function (event, ui) {

$('.iframeCover').remove();

    },
    resizeStop: function (event, ui) {

var d = $('');

        $("body").append(d);

    },