HTML Embedded PDF's & onload

Question

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 it never seems to get fired.

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

Answer 1

I don't know why everyone makes it so hard.

<object data="yourfile.pdf" style="background: transparent url(AnimatedLoading.gif) no-repeat center;" type="application/pdf" />

Answer 2

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>

Answer 3

I'm loading the PDF with jQuery ajax into browser cache. Then I create embedded element with data already in browser cache.

var url = "http://example.com/my.pdf";
// show spinner
$.mobile.showPageLoadingMsg('b', note, false);
$.ajax({
    url: url,
    cache: true,
    mimeType: 'application/pdf',
    success: function () {
        // display cached data
        $(scroller).append('<embed type="application/pdf" src="' + url + '" />');
        // hide spinner
        $.mobile.hidePageLoadingMsg();
    }
});

You have to set your http headers correctly as well.

HttpContext.Response.Expires = 1;
HttpContext.Response.Cache.SetNoServerCaching();
HttpContext.Response.Cache.SetAllowResponseInBrowserHistory(false);
HttpContext.Response.CacheControl = "Private";

Answer 4

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

Answer 5

"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 6

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 7

$(document).ready(function() {
   });

would not work as this fires mostly on document.readyState == interactive rather than on document.readyState == complete.

If you put a timer with this check (document.readyState == "complete") it would definitely work!

Answer 8

<embed onload='alert("I should be called")'></embed>