模态对话框 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、火狐。但是在 IE9-11 上，页面似乎缩放错误。

图片变小了，字体也变小了。我似乎打印使用比 iframe 更大的宽度进行打印，就像我添加 650px 的固定宽度一样。每边大约有 300px 留空。当我在打印前检查 body 和 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 内的打印。

模态对话框 JQuery IE 9-11 打印问题

Modal Dialog JQuery IE 9-11 Print Issue

javascript

printing

iframe

jquery

modal-dialog