Displaying an iframe in Internet Explorer

Question

Displaying an iframe in Internet Explorer

My current setup involves a button that triggers the loading and printing of a report within an "invisible" iframe enclosed in a div. This process allows users to print the report from a different page without any visual disruption or changing pages, aside from the print dialog appearing. While this method works smoothly in Chrome and Firefox, it encounters issues in Internet Explorer (IE). In IE, the parent page gets printed in its entirety, and a distorted iframe is awkwardly inserted at the bottom of the page where the iframe should be loaded.

To facilitate this process, I have an empty div named printerDiv which acts as a designated location for styling and inserting content via Javascript:

<div id="printerDiv"></div>

The JavaScript function utilized here operates upon clicking the designated button, effectively inserting the desired print page into an iframe located inside printerDiv. Once the page is loaded, it initiates the printing process:

function printPage(url) {
    var div = document.getElementById("printerDiv");
    div.innerHTML = '<iframe src="'+url+'" onload=this.contentWindow.print();>
        </iframe>';
 }

In order to conceal the div during the printing process, CSS has been implemented with absolute positioning to move it off the visible screen area. Previous attempts using display:none resulted in Firefox being unable to print iframes styled in that manner:

#printerDiv{
    position:absolute;
    left:-9999px;
}

When attempting to print in IE, the full page is printed along with a small iframe positioned at the bottom, where #printerDiv resides. The content loads correctly, but only the iframe displays while failing to hide properly. Any other content added to #printerDiv remains hidden as intended.

I've experimented with various solutions outlined in this query within my JavaScript function: experimenting with self.print and document.parentWindow.print, adjusting the styles of printerDiv to 0px height/width, all to no avail.

If possible, I am open to alternative solutions that do not involve iframes, considering IE's notable compatibility challenges. However, the primary functionality of loading invisible content and directly initiating printing via a button press must remain intact.

javascript internet-explorer iframe cross-browser

Answer 1

Answer №1

In my personal experience, I found that the key was to not hide the iframe I needed to print. If I attempted to hide it using methods like display:none or visibility:hidden, the parent page would always end up being printed instead.

Instead of hiding the frame altogether, I simply resized it to 10x10 and removed the borders. Surprisingly, this approach worked well when combined with a delay trick.

Here's a sample code snippet:

    <script type="text/javascript>
    function printFrame(frameId, targetContent)
    {
        var doc = $('#'+frameId).get(0).contentWindow.document;
        var $body = $('body',doc);

        $body.html($('#'+targetContent).html());

        setTimeout(function(){
            $('#'+frameId).get(0).contentWindow.focus();
            $('#'+frameId).get(0).contentWindow.print();            
        }, 1000);        
    }
</script>

HTML:

<div id="contentToPrint">
I want only this content to be printed
</div>
<iframe src="about:blank" id="printframe" style="border:0" width="10" height="10"></iframe>

Button for printing:

<a href="javascript:printFrame('printframe','contentToPrint')">Print This Frame</a>

Answer 2

In my personal experience, I found that the key was to not hide the iframe I needed to print. If I attempted to hide it using methods like display:none or visibility:hidden, the parent page would always end up being printed instead.

Instead of hiding the frame altogether, I simply resized it to 10x10 and removed the borders. Surprisingly, this approach worked well when combined with a delay trick.

Here's a sample code snippet:

    <script type="text/javascript>
    function printFrame(frameId, targetContent)
    {
        var doc = $('#'+frameId).get(0).contentWindow.document;
        var $body = $('body',doc);

        $body.html($('#'+targetContent).html());

        setTimeout(function(){
            $('#'+frameId).get(0).contentWindow.focus();
            $('#'+frameId).get(0).contentWindow.print();            
        }, 1000);        
    }
</script>

HTML:

<div id="contentToPrint">
I want only this content to be printed
</div>
<iframe src="about:blank" id="printframe" style="border:0" width="10" height="10"></iframe>

Button for printing:

<a href="javascript:printFrame('printframe','contentToPrint')">Print This Frame</a>

Answer 3

Answer №2

`<script>

function framePrint(frameName) {

parent[frameName].focus();

parent[frameName].print();

}

</script>`

<a href="javascript:framePrint('FRAME123');">Print</a>

Change FRAME123 to the name of the frame that you want to print.

Answer 4

`<script>

function framePrint(frameName) {

parent[frameName].focus();

parent[frameName].print();

}

</script>`

<a href="javascript:framePrint('FRAME123');">Print</a>

Change FRAME123 to the name of the frame that you want to print.

Answer 5

Answer №3

Encountering a similar issue with IE11, I found that the .focus() call was being disregarded and both the parent page and the iframe were being printed. To resolve this, I implemented a solution where a style tag was injected to hide everything except the iframe just before printing, and then remove the style after the print function was called. More details on my approach can be found at this link.

Answer 6

Encountering a similar issue with IE11, I found that the .focus() call was being disregarded and both the parent page and the iframe were being printed. To resolve this, I implemented a solution where a style tag was injected to hide everything except the iframe just before printing, and then remove the style after the print function was called. More details on my approach can be found at this link.

Answer 7

Answer №4

Encountered a similar problem with IE10 not printing the parent page but instead showing the iFrame content. The issue was resolved by adding a timeout function:

<script type="text/javascript">
function selfPrint(){
    self.focus();
    self.print();
}
setTimeout('selfPrint()',2000);
</script>

Answer 8

Encountered a similar problem with IE10 not printing the parent page but instead showing the iFrame content. The issue was resolved by adding a timeout function:

<script type="text/javascript">
function selfPrint(){
    self.focus();
    self.print();
}
setTimeout('selfPrint()',2000);
</script>

Answer 9

Answer №5

If you're looking to display a report in your webpage, consider implementing the following approach:

Utilize jQuery's .load() function to insert the report content into the designated element #printerDiv and style it using CSS.

In your CSS file, define the following styles:

#printerDiv{display:none;}
@media print{
    body *{display:none;}
    #printerDiv{display:block;height:100%;width:100%}
}

Include the below JavaScript code for the print functionality:

$('#printerDiv').empty().load(url, function(){
        window.print();
    }); //or use any other preferred library or plain JavaScript

Answer 10

If you're looking to display a report in your webpage, consider implementing the following approach:

Utilize jQuery's .load() function to insert the report content into the designated element #printerDiv and style it using CSS.

In your CSS file, define the following styles:

#printerDiv{display:none;}
@media print{
    body *{display:none;}
    #printerDiv{display:block;height:100%;width:100%}
}

Include the below JavaScript code for the print functionality:

$('#printerDiv').empty().load(url, function(){
        window.print();
    }); //or use any other preferred library or plain JavaScript

Displaying an iframe in Internet Explorer

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Sequencing asynchronous functions in Angular: Ensuring one function runs before another

Having issues with retrieving data using findOne or findById in Express and Node JS, receiving undefined values

What is the method for presenting text based on the chosen Select Option?

Ways to retrieve data from response instead of subscription JSON in Angular 2/4

Element not found: Selenium WebDriver encountered an issue locating the element in Internet Explorer

Utilizing jQuery to apply multiple classes simultaneously?

Display options through numerical selection

Guide to displaying a loading image when selecting an item from a dropdown menu using JavaScript

The recharts error message displays: "There is no overload that matches this call."

Ways to prevent an empty iframe from triggering a load event upon injection

Having issues with Angular http.post not sending data when using subscribe

Passport JS allows you to create a secure login form that redirects users to different URIs based on their role

Making a standard AJAX request using jQuery without including the XHR header

Angular: Unable to access values of non-existent data (reading '0')

What is the best way to generate a new object within a function and then return it

Adjust the value of a JavaScript variable using Selenium

Sails encountering CORS preflight error due to cross-origin request

MUI: The fontFamily property is not able to be overridden by nesting within the

How can PHP be used to decode JSON and transmit it to Javascript?

Obtain a Spotify Token and showcase information in next.js