HTML Embedded PDF's & onload

Question

Hi

I'm embedding a PDF in a web page with the following html :-

<object id="pdf" classid="clsid:CA8A9780-280D-11CF-A24D-444553540000" width="1024"
            height="600">
            <param name="SRC" value="/GetDoc.ashx?SOID=<%=Html.Encode(Model.OrderID)%>" />
            <embed src="/GetDoc.ashx?SOID=<%=Html.Encode(Model.OrderID)%>  "
                width="1024" height="600">
            <noembed> Your browser does not support embedded PDF files. </noembed>                     
        </embed>
        </object>

The PDF's can be a little slow to load so I'd like to hide the object and display a loading message / gif until it's fully loaded so the user isn't looking at a blank screen.

All I really need is a way of telling when the object is fully loaded. I've tried the 'onload' event of the but i never seems to get fired.

I'm beginning to think it might not be possible, but it never hurts to ask...

Answer 1

"Content within a tag is displayed when an object is loading, but hasn't yet finished."

So put your spinner in there and it should work out nicely for you. And you won't have to write any JavaScript.

src: http://en.wikibooks.org/wiki/XHTML/XHTML_Objects

Answer 2

You are going to want something like jQuery's document.ready() function. For non-IE browsers, you can register a handler for the event DOMContentLoaded, and your handler function will be called after all the images and objects have been loaded. For IE, you have to continually check the document.readyState property, and wait for it to be "complete".

If you are using jQuery, they've done the hard work for you, so all you have to do is:

$(document).ready(function() {
    //take away the "loading" message here
});

If you don't want to use jquery, you'd have to do something like:

addEventListener('DOMContentLoaded', function() { 
    //take away the "loading" message here
});

function waitForIE() {

    if (!document.all) return;

    if (document.readyState == "complete") {
        //take away the "loading" message here
    }
    else {
        setTimeout(waitForIE, 10);
    }
}

waitForIE();

Answer 3

None of the recommendations are valid, because DOM is loaded before the PDF content is loaded. So DOM can't control ActiveX content

Answer 4

Following code works.

<div style="background: transparent url(loading.gif) no-repeat">
<object height="1250px" width="100%" type="application/pdf" data="aaa.pdf">
<param value="aaa.pdf" name="src"/>
<param value="transparent" name="wmode"/>
</object>
</div>