Загрузите диалоговое окно jquery ui с iframe и измените размеры iframe и диалоговое окно, чтобы соответствовать высоте и ширине iframe - PullRequest
Новая
       4

Загрузите диалоговое окно jquery ui с iframe и измените размеры iframe и диалоговое окно, чтобы соответствовать высоте и ширине iframe

1 голос
/ 17 октября 2011

Я делаю во время выполнения создание div для диалогового окна и загрузку iframe с динамически изменяемым URL.

Моя проблема заключается в том, что после загрузки iframe внутри диалогового окна jquery-ui я хотел бы изменить размер обоих iframe, чтобы соответствовать его высоте содержимого и widht, а затем после изменения размера диалогового окна.

Ниже моя функция javascript, использующая 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=\"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.

Заранее спасибо.

1 Ответ

1 голос
/ 23 декабря 2012

попробуй так ...

resizeStart: функция (событие, пользовательский интерфейс) {

$ ( 'iframeCover.) Удалить ();. 

    },
    resizeStop: function (event, ui) {

var d = $ (''); 

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

    },
...