parent.iframePDF is undefined

Question

I get 'parent.iframePDF is undefined' JavaScript error when i use the below code in Firefox and an 'object expected' error in IE.

Can someone tell me what it is that i'm doing wrong? Thanks

function PrintFrame(xFile){
    parent.iframePDF.location.href = xFile;
    document.getElementById("spanMess").style.display = "block";

    parent.iframePDF.onload = new function() {
        setTimeout("parent.iframePDF.print();parent.document.getElementById('spanMess').style.display='none';",10000);
    }
}

<iframe id="iframePDF" src="about:blank" style="display:none"></iframe>

<input type="image" onclick="PrintFrame('525.pdf')" src="../../cms_res/DisneyChannel/playhouse/images/buttons/printer.png" />

<span id="spanMess" style="display:none;color:red;">
    <h3>Preparing Document For Print</h3>
</span>

Answer 1

You should use name="iframePDF" instead of id="iframePDF". In that way, you can use window.iframePDF (-> window.frames.iframePDF).

If you use document.getElementById('iframePDF'), then you can't use .location.href on that.

Edit: Tim is right, no parent is needed here.

Answer 2

Your code may not work for succeeding calls of PrintFrame on other browsers, the problem is that the onload event on iframe may not fire anymore.

You may try this:

function frameLoaded(frame){
   frame.contentWindow.print();
   document.getElementById('spanMess').style.display='none';",10000);
}

function PrintFrame(xFile){
   var holder = document.getElementById('iframePDFHolder');
   holder.innerHTML = '<iframe onload="frameLoaded(this)" src=" + xFile + '"></iframe>';
}

<div id="iframePDFHolder" style="display:none;"></div>

<input type="image" onclick="PrintFrame('525.pdf')" src="../../cms_res/DisneyChannel/playhouse/images/buttons/printer.png" />
<span id="spanMess" style="display:none;color:red;"><h3>Preparing Document For Print</h3></span>

Answer 3

First problem is that parent refers to the window object of the document containing the current document and you actually want to call a function in the current document, so the parent is not required.

Second, you should use document.getElementById("iframePDF") rather than relying on IE's nasty featrue of creating properties of the global object corresponding to IDs of elements in the page. To get the iframe's window object you can use the (non-standard but widely supported) contentWindow property. Alternatively, assign a name to your iframe instead of an id and use window.frames["iframePDF"].

Third, new function() {...} is not what you want: the new there is not necessary and confusing; drop that.

Fourth, assigning an onload property to an iframe object will not work in all browsers. You need to handle the load event within the document loaded into the iframe and call a function in the main document, using parent to get hold of the containing document.