Loading an iframe without injecting it into the DOM

Question

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 command, 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 :)

Answer 1

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 loaded anywhere the user can see it:

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

Live example (without printing)

The trick is figuring out when to remove it. You could try just removing it X seconds after receiving the load event, but that just sounds like asking for trouble.

---

Side note: As a user, I vastly prefer to see what I'm going to print before printing it. But if you have a use-case for avoiding that, perhaps this will help.

Answer 2

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.