CODEWITHSUNDEEP
htmlpdfembed
phil_h
phil_h

Reputation:

HTML Embedded PDF's & onload

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...

Upvotes: 28

Views: 32082

Answers (8)

DougB
DougB

Reputation: 157

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

Upvotes: 14

jmjm
jmjm

Reputation: 159

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

Upvotes: 0

Pavel Savara
Pavel Savara

Reputation: 3457

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

Upvotes: 7

Amir Shahzad
Amir Shahzad

Reputation: 9

$(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!

Upvotes: 0

user124118
user124118

Reputation: 435

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>

Upvotes: 10

Michael
Michael

Reputation: 311

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

Upvotes: 3

Matt Bridges
Matt Bridges

Reputation: 49385

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

Upvotes: 0

geowa4
geowa4

Reputation: 41803

"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

Upvotes: 0

Related Questions