Loading an iframe without injecting it into the DOM

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>
<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 () {

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

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


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() {
    .css({position: "absolute", left: "-10000px", top: "0px"})

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.

Need Your Help

WPF: Allow user to resize images in RichTextBox

wpf image resize richtextbox rtf

Is there a method within the RichTextBox control in WPF to allow for the user to resize inserted images, or do you have to devise your own method for this.

How to merge large projects in Eclipse?

java eclipse svn merge

I've been working with branches for quite some time now, but I always used command-line tools to do the actual merging. However, now I need to do it from Eclipse only. Branching and merging being a

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.