使用 iframe 加载 jquery ui 对话框并调整 iframe 和对话框的大小以适应 iframe 的高度和宽度

Question

我正在运行时为对话框创建 div 并使用动态更改 url 加载 iframe。

我的问题是在 iframe 加载到 jquery-ui 对话框内之后，我想调整 iframe 的大小以适应其内容的高度和宽度，然后在调整对话框大小之后。

下面是我使用 jquery 的 javascript 函数。

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=\"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);}

它在 Chrome 中运行良好，但在 IE 和 FireFox 中运行不佳。

提前致谢。

Answer 1

以这种方式尝试...

resizeStart: function (event, ui) {

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

    },
    resizeStop: function (event, ui) {

var d = $('');

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

    },