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

【问题标题】：Load jquery ui dialog box with iframe and resize iframe and dialogbox to fit iframe height and width使用 iframe 加载 jquery ui 对话框并调整 iframe 和对话框的大小以适合 iframe 的高度和宽度
【发布时间】：2012-12-24 00:24:42
【问题描述】：

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

我的问题是在 jquery-ui 对话框中加载 iframe 后，我想调整 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 中运行不佳。

提前致谢。

【问题讨论】：

标签： jquery-ui-dialog

【解决方案1】：

这样试试吧……

resizeStart: 函数（事件，ui）{

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

    },
    resizeStop: function (event, ui) {

var d = $('');

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

    },

【讨论】：