Modal Dialog JQuery IE 9-11 Print Issue

Question

I am trying to convert a large old IE 8 system to current browsers. Once of the issues I am fixing is the showModalDialog, due to it not working on Chrome since 37 and becoming more obsolete.

The method that I am using is:

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'});
}

Called with:

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

With a print button inside the iframe loaded.

I have tested this in IE 8-11, Firefox, Chrome. The display of the iframe looks the same on all browsers and the issue only happens when printing.

They seems to print correctly on: IE 8, Chrome, Firefox. However on IE9-11, the page appears to be scaling wrong.

The images have shrunk in size and the font has all scaled down. I appears that print is using a larger width than the iframe for printing, as when I add a fixed width of 650px. There is roughly 300px on each side left blank. When I check the width of the body and the iframe prior to printing, everything seems correct.

I'm welcome to any solutions that would help solve this issue.

Answer 1

Figured it out.

It would seem that IE 9+ does not like printing iframes inside itself.

So what I did was.

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');
}

This forces IE to use iframe.contentWindow.document.execCommand . This is the main factor to getting it to print correctly. Every other browser can use print as they are able to handle printing inside the iframe.