I have basically the opposite problem to this question: How to prevent iframe from loading when injected into the DOM? I wish to load an IFRAME element which is not injected into the DOM.

I am attempting to print a page via javascript. The goal is to avoid having to navigate a link, issue a print mand, and navigate back.

I have jQuery available to me.

// fake table that illustrates pertanent DOM
<table class=diary><tr><td data-job=12345 contextmenu=job_menu><a href=/jobs/12345>view job 12345</a></table>

// real code
<menu type="context" id="job_menu">
    <menuitem label="Print Job" onclick="PrintJob(); return false;"></menuitem>
</menu>
<script type="text/javascript">
    var target = null;

    function PrintJob()
    {
        var job_no = $(target).data('job');
        if(job_no > 0) {
            $('<iframe name="printjob" src="/jobs/'+job_no+'">').load(function () {
                this.focus();
                this.print();
            })
            .trigger('load');
        }
    }

    $('.diary').bind('contextmenu', function (ev) {
        var td = ev.target;
        while(td && td.nodeName != 'TD')
            td = td.parentNode;
        target = td;
    });
</script>

The problem is that calling .trigger('load') on the generated IFRAME element does not cause a GET request on the src attribute URL. I was hoping the default handler would be called first, then my attached handler would fire, and print the contents of the iframe, but my load handler just gets called immediatly.

I can't attach the print call to the iframe's contentDocument.onready event because contentDocument is nil until the frame has loaded. I don't know if you can focus an element not in the DOM or if that is necessary for printing, but the code I have seen elsewhere all had .focus() preceeding .print() (I also tried using window.frames['printjob'].print(), but I suspect window.frames['printjob'] is nil if the iframe is not yet in the window :)

I have basically the opposite problem to this question: How to prevent iframe from loading when injected into the DOM? I wish to load an IFRAME element which is not injected into the DOM.

I am attempting to print a page via javascript. The goal is to avoid having to navigate a link, issue a print mand, and navigate back.

I have jQuery available to me.

// fake table that illustrates pertanent DOM
<table class=diary><tr><td data-job=12345 contextmenu=job_menu><a href=/jobs/12345>view job 12345</a></table>

// real code
<menu type="context" id="job_menu">
    <menuitem label="Print Job" onclick="PrintJob(); return false;"></menuitem>
</menu>
<script type="text/javascript">
    var target = null;

    function PrintJob()
    {
        var job_no = $(target).data('job');
        if(job_no > 0) {
            $('<iframe name="printjob" src="/jobs/'+job_no+'">').load(function () {
                this.focus();
                this.print();
            })
            .trigger('load');
        }
    }

    $('.diary').bind('contextmenu', function (ev) {
        var td = ev.target;
        while(td && td.nodeName != 'TD')
            td = td.parentNode;
        target = td;
    });
</script>

The problem is that calling .trigger('load') on the generated IFRAME element does not cause a GET request on the src attribute URL. I was hoping the default handler would be called first, then my attached handler would fire, and print the contents of the iframe, but my load handler just gets called immediatly.

I can't attach the print call to the iframe's contentDocument.onready event because contentDocument is nil until the frame has loaded. I don't know if you can focus an element not in the DOM or if that is necessary for printing, but the code I have seen elsewhere all had .focus() preceeding .print() (I also tried using window.frames['printjob'].print(), but I suspect window.frames['printjob'] is nil if the iframe is not yet in the window :)

• javascript
• jquery
• dom
• iframe

• 1 FWIW, as a user I vastly prefer to see what I'm actually going to print before printing it. Google's answer here is to open a new window showing what will be printed. They've probably done a fair bit of user research on this... – T.J. Crowder Commented Dec 1, 2011 at 11:19
• @RoToRa: the job page already has a print style sheet, it is pletly different from the diary page. I cannot transmute the latter into the former with just CSS. – Nicholas Shanks Commented Dec 1, 2011 at 11:32
• @T.J.Crowder: All browsers (at least, on Mac OS) display a print preview in the print dialog box, which can be viewed fiull size as a PDF before printing. This dialog box is what is activated by the print() function—it does not spool directly to the print server. Chrome tries to be difficult and doesn't use the OS-provided print box, and ends up missing out on lots of features (such as ink/toner levels) that the standard dialog provides. – Nicholas Shanks Commented Dec 1, 2011 at 11:36
• @Nicholas: That's being increasingly mon, but it's by no means universal (on other OS's). In many cases you just get a boring print box with no preview of what you're printing. Note than when I mentioned Google, I was talking about their web apps, not Chrome. – T.J. Crowder Commented Dec 1, 2011 at 11:40

2 Answers 2

As Tom van der Woerdt said, the iframe won't load unless you add it to the DOM.

But that doesn't mean it has to be visible:¹

$(`<iframe name="printjob" src="/jobs/'+job_no+'" style="display: none">`)
    .load(function() {
        this.contentWindow.focus();
        this.contentWindow.print();
    })
    .appendTo(document.body);

Note the display: none. In my experiments with modern browsers (and those of user2027290, who pointed this out), the iframe gets loaded, and the print dialog shown.

The trick is figuring out when to remove it. Modern browsers have an afterprint event you could use. Or you could just remove it prior to the next time the user prints, avoiding having more than one of them.

¹ In the 2011 version of this answer, I had it loaded visibly but outside the viewport, like this:

$('<iframe name="printjob" src="/jobs/'+job_no+'" style="position: absolute; left: -10000px; top: 0">')
    .load(function() {
        this.contentWindow.focus();
        this.contentWindow.print();
    })
    .appendTo(document.body);

I don't recall whether I did that because display: none didn't work at the time or because I just didn't think of it, but if you run into any issue with the display: none solution, that might be a fallback to try.

Isn't this why AJAX was invented? Maybe that might help.

To answer your actual question: you can't. An <iframe> won't load if you don't insert it into the DOM.