Unable to print iframe content from parent page in IE 11

Question

The below is the javascript code that had been working fine for me in IE 8 on Windows XP.

<script type="text/javascript">
    function printFrame(frameId) {
       var iframe = $('#'+frameId)[0]; 
       iframe.contentWindow.focus(); 
       iframe.contentWindow.print(); 
    }
</script

The above function is called then the "Print Frame" button is clicked in parent page.

<iframe id="testFrame" src="" name="testFrame"> </iframe>

<input type="button" onclick="printFrame('testFrame')" value="Print Frame"/>

Recently, I upgraded my machine to Windows 7 and IE 8 to IE 11.

Now this same function does not give the expected result of printing the iframe contents. I tested this in chrome v34, firefox 30. This seems to work in them except in IE 11.

On researching, I found that when iframe src is dynamically set, iframe.contentWindow does not return the excepted iframe window object.

I tried using window.print() inside the jsp in iframe. This seems to work if the src is not changed dynamically. But I need to change the contents of iframe to be dynamically set according to the selection in another drop down box in parent page.

For example , check the below link in IE 11.

http://plungjan.name/SO/testprintiframe.html

The first time the link prints the contents on iframe. Then, click on the button. This results in the parent window being sent to printer instead of the iframe contents.

Then I tried another method. Wrote the below code in the iframe contents jsp and tried to access it from parent page. I was unable to access the method itself. "script code in iframe jsp"

<script type="text/javascript">
    function printFrame() {
       window.print();
    }
</script

"script code in parent jsp"

Try 1:

<script type="text/javascript">
    function printMyFrame(frameId) {
        var iframe = $('#'+frameId)[0]; 
        $(iframe).contents().printFrame();
    }
</script

Try 2:

<script type="text/javascript">
    function printMyFrame(frameId) {
       setTimeout(function() {
          window.frames[frameId].contentWindow.printFrame();
        }, 200);
     }
</script>

I searched and implemented almost all the methods found on google search to access the iframe window instead of the parent window. But have been unable to print the iframe contents using IE 11.

Please guide me as to how to print the iframe contents in IE 11.

Answer 1

I had a similar problem recently and found that this method was needed

var target = document.getElementById('print-container');
        try {
            target.contentWindow.document.execCommand('print', false, null);
        } catch(e) {
            target.contentWindow.print();
        }
         });

Answer 2

This worked for me,

this works in ie,chrome and firefox

var result = contentWindow.document.execCommand('print', false, null);

if (!result)
contentWindow.print();

Answer 3

This is basically a rehash of the above answers (Nayas Subramanian) in a jsFiddle - but security doesn't allow it to work in stackoverflow 100%...

$('#print').click(function ()
{
    var contentWindow = document.getElementById("frameContent").contentWindow;
    var result = contentWindow.document.execCommand('print', false, null);
    if(!result)  contentWindow.print();
});

iframe {
width:100%;
height:100%;
border: none;
}
#print {
position:absolute;
left:20px;
top: 20px;
font-size: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="frameContent" name="frameContent" src="https://stackoverflow.com/questions/24673024/unable-to-print-iframe-content-from-parent-page-in-ie-11#"></iframe>
<button id="print">Print</button>