HTML Embedded PDF's & onload

30,536

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

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

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

Solution 4

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

Share:
30,536
Admin
Author by

Admin

Updated on July 09, 2022

Comments

  • Admin
    Admin almost 2 years

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