模態對話框JQuery IE 9-11打印問題

Question

我正在嘗試將大型的舊IE 8系統轉換為當前的瀏覽器。 我要修復的問題之一是showModalDialog，因為它自37以來在Chrome上不起作用，並且變得過時了。

我正在使用的方法是：

http://extremedev.blogspot.co.uk/2011/03/windowshowmodaldialog-cross-browser-new.html

$.showCustomModal = function(options) {

    var defaultOptns = {
        url: null,
        dialogArguments: null,
        height: 'auto',
        width: 'auto',
        frameWidth:'100%',
        position: 'center',
        resizable: false,
        scrollable: false,
        onClose: function() {enableScrolling();},
        returnValue: null,
        doPostBackAfterCloseCallback: false,
        postBackElementId: null
    };

    var fns = {
        close: function() {
            enableScrolling();
            //opts.returnValue = $dialog.returnValue;
            opts.returnValue = $frame[0].contentWindow.window.returnValue;
            $dialog = null;
            opts.onClose();
            if (opts.doPostBackAfterCloseCallback) {
                postBackForm(opts.postBackElementId);
            }
        }
    //, adjustWidth: function() { $frame.css("width", "100%"); }
    };

    // build main options before element iteration

    var opts = $.extend({}, defaultOptns, options);

    var $frame = $('<iframe id="iframeDialog" name="iframeDialog" />');

    if (opts.scrollable){
        $frame.css('overflow', 'auto');
    }else{
        disableScrolling();
    }

    if (opts.width!= '100%' && opts.width!= 'auto'){
        opts.frameWidth = opts.width;
        opts.width+=7;
    }
    console.log("width "+opts.width);
    console.log("frameWidth "+opts.frameWidth);

    $frame.css({
        'padding': 0,
        'margin': 0,
        'padding-bottom': 10,
    });

    var $dialogWindow = $frame.dialog({
        autoOpen: true,
        modal: true,
        width: opts.width,
        height: opts.height,
        resizable: opts.resizable,
        position: opts.position,
        overlay: {
            opacity: 0.5,
            background: "black"
        },
        close: fns.close,
        resizeStop: fns.adjustWidth
    });

    $frame.attr('src', opts.url);
    //fns.adjustWidth();

    $frame.load(function() {
        if ($dialogWindow) {

            var maxTitleLength = 50;
            var title = $(this).contents().find("title").html();

            if (title.length > maxTitleLength) {
                title = title.substring(0, maxTitleLength) + '...';
            }
            $dialogWindow.dialog('option', 'title', title);
        }
    });
    $frame.css('width', opts.frameWidth);

    $dialog = new Object();
    $dialog.dialogArguments = opts.dialogArguments;
    $dialog.dialogWindow = $dialogWindow;
    $dialog.returnValue = null;
}

function postBackForm(targetElementId) {
    var theform;
    theform = document.forms[0];
    theform.__EVENTTARGET.value = targetElementId;
    theform.__EVENTARGUMENT.value = "";
    theform.submit();
}

var prntWindow = getParentWindowWithDialog(); //$(top)[0];

var $dlg = prntWindow && prntWindow.$dialog;

function getParentWindowWithDialog() {
    var p = window.parent;
    var previousParent = p;
    while (p != null) {
        if ($(p.document).find('#iframeDialog').length) return p;

        p = p.parent;

        if (previousParent == p) return null;

        // save previous parent

        previousParent = p;
    }
    return null;
}

function setWindowReturnValue(value) {
    if ($dlg) $dlg.returnValue = value;
    window.returnValue = value; // in case popup is called using showModalDialog

}

function getWindowReturnValue() {
    // in case popup is called using showModalDialog

    if (!$dlg && window.returnValue != null)
        return window.returnValue;

    return $dlg && $dlg.returnValue;
}

if ($dlg) window.dialogArguments = $dlg.dialogArguments;
if ($dlg) window.close = function() { console.log("Close Called"); if ($dlg) $dlg.dialogWindow.dialog('close'); };

function disableScrolling(){
    $('html, body').css({'overflow': 'hidden','height': '100%'});
}

function enableScrolling(){
    $('html, body').css({'overflow': 'auto','height': 'auto'});
}

致電：

$.showCustomModal({
                         url: "/Action/DisplayPage",height: 660,width: 708,
                         onClose: function(){popupContinue(); }
                    });

在iframe內裝有打印按鈕。

我已經在IE 8-11，Firefox，Chrome中對此進行了測試。 iframe的顯示在所有瀏覽器上看起來都是一樣的，僅在打印時才會出現此問題。

它們似乎可以在IE 8，Chrome，Firefox上正確打印。 但是在IE9-11上，頁面似乎縮放錯誤。

圖像尺寸縮小，字體全部縮小。 我似乎在打印時使用的寬度大於iframe的寬度，例如當我添加650px的固定寬度時。 每側留有大約300px的空白。 當我在打印前檢查機身和iframe的寬度時，一切似乎都正確。

歡迎使用任何有助於解決此問題的解決方案。

Answer 1

弄清楚了。

IE 9+似乎不喜歡在其內部打印iframe。

所以我做了。

function customModalPrint(iframeId) {   
    var iframe = parent.$('#'+iframeId)[0]; 
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)){
       try {
          iframe.contentWindow.document.execCommand('print', false, null);
       } catch(e) {
          iframe.contentWindow.printPage();
     }
   }else{
      print();
   }
   parent.$("#"+iframeId).dialog('close');
}

這迫使IE使用iframe.contentWindow.document.execCommand 。 這是使其正確打印的主要因素。 每個其他瀏覽器都可以使用打印，因為它們能夠處理iframe中的打印。