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内的打印。

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

1 个答案: