Loading image for embedded PDF

Rowdyone52
Rowdyone52 used Ask the Experts™
on
I am trying to embed a PDF in an html page. The problem is it takes a few moments to load and we need a loading image to display until it is complete. I can't find a cross browser solution. Chrome handles the iframe with an onload event which hides the loading image and displays the iframe, but FF doesn't fire the onload event. IE doesn't show the PDF inline if it's in an iframe but opens it in the default application. The object tag doesn't have an onload event in Chrome or IE and if I try downloading the pdf asynchronously there is no way to pass the data to the object since it's source has to be a url. The same problem exists for the embed tag. This seems like it should be a lot easier, but any advice would be welcomed.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Michel PlungjanIT Expert
Top Expert 2009

Commented:
1) chrome has native handling of PDF so that makes it the odd one out
2) ie normally prefers iframe over object which works in fx.
You could wrap the PDF in an HTML  document of it's own which will trigger the iframe onload it is in.
Kim WalkerWeb Programmer/Technician

Commented:
What if the loading image were the background image for the iframe? It would be covered by the PDF when it loads. No onload event would be required then.

Author

Commented:

1) chrome has native handling of PDF so that makes it the odd one out
I need the PDF embedded in an html based page because other controls are needed on the page. So if I'm understanding you right, the native handling of a PDF file doesn't help me in this case.


2) ie normally prefers iframe over object which works in fx.
You could wrap the PDF in an HTML  document of it's own which will trigger the iframe onload it is in.
In IE the iframe doesn't display inline but opens in the default PDF application. Since I have controls on the page, it is important that the PDF be shown inline. Loading the PDF in an html document inside the iframe will not work because the document onload event fires after the document is loaded but well before the PDF is loaded and rendered. It would essentially be the same issue just buried one level deeper.


What if the loading image were the background image for the iframe? It would be covered by the PDF when it loads. No onload event would be required then.
This doesn't work for the iframe because the PDF doesn't open inline for IE. I tried the same idea with the object tag, and the problem is that Chrome (and I think but it's been a day or two also IE) render the object with a solid background which hides the loading image. I've tried using CSS to set the background to transparent and adding the following param to the object element
 <param name="wmode" value="transparent"> </param> 

Open in new window

but neither worked for me -- I still could not see the loading image.

I appreciate the suggestions, though. Let me know if I didn't understand you correctly or if it looks like I'm doing something wrong. Or if you just have another idea. :)
IT Expert
Top Expert 2009
Commented:
I do not understand this part:
In IE the iframe doesn't display inline but opens in the default PDF application

I open PDFs in iFrames all the time - are you sure it is not a setting in your browser?

Have a look here: http://goo.gl/cE37O
It opens in the iframe in my IE8 and should in your IEwhatever too assuming you have Acrobat reader installed correctly and PDF set to open in the browser.

Chrome has a built-in PDF viewer, so whatever you do in Chrome cannot be expected to work the same elsewhere.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial