Question

我正在为对话框创建div并为动态更改网址加载iframe。

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

下面是我使用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。'）除去（）;

    },
    resizeStop: function (event, ui) {

var d = $（''）;

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

    },

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

1 个答案: