Using the Dreaded <Object> tag to provide PDF files Real-time

So it’s been a few weeks since my last post and I apologize. I have been quite busy at work and it has been rough late hours. But the good news is that the current project made it to production without catastrophe and on time. Customer is very pleased and now it’s time for Phase 2 and bug fixing. I digress and will now get on with the show.

 

What is an object tag?

An object tag is a special tag that has been around a long time. There use is limited, but best known for embedding video, audio, Adobe Flash and PDF’s for a rich client experience throughout the web . You still require some third party browser plugins (such as Adobe for Flash and PDF viewing). This has been the defacto standard for a long time in the HTML/Web world. for rich content. Here is an example of using the object tag.


 

So lets take this apart a little. The first attribute is fairly obvious. It is the Id that you would use to access it through the DOM in JavaScript or JQuery. The data tag is used to retrieve the location of the video, audio etc. you are looking to push into the object tag. Wu will get to why I say “push” later on in this article. The type attribute is used to determine what “MIME type” of object you are going to be retrieving. It has to be a MIME type that is recognized in the W3C standards or the browser will most likely ignore the request or sow a blank box depending on the plugins you may be using or if it is an image. For more information on the possible MIME types, please go here to learn more. The one I am using above is for returning PDF in a byte array.

The reason the object tag can be painful is the fact that it has not been updated to meet the ever growing requirements of real-time updates. Once the data attribute is set and the data is retrieved, you are stuck with it for the pages lifecycle right? Well, not necessarily!

 

How to get around object tag one time results

So the secret is to put the object tag inside an iframe. Why you say? Because the iframe can be called upon over and over again to reload it’s page without the rest of the page being effected. You can look at the iframe as an Upload Panel for those of you that have worked with Web Forms before. The only big difference is that the iframe is a tag that loads an actual page while the Upload Panel is an AJAX call. To implement this, you would write you HTML something like this:

 


What this does is it allows you to push data to the object multiple times because the iframe will refresh each time. Using JQuery, it might looks something like this:

$("#object-iframe").attr("src", url);
$("#objectpreviewContainer").attr("data", url);

If, you happen to be able to limit your browser acceptability to IE9+ (Like internal or customer specific web applications), you can use the following to know when the document is  loaded into the object DOM object.
 var objElement = document.getElementById('objectpreviewContainer');
        objElement.onreadystatechange = function () {

 

That’s all for now. Happy Coding! Smile

 
Advertisements

About Gregg Coleman

I am Senior-level Software Engineer working primarily these days with .NET. I have a good working knowledge of ASP.NET MVC, Web Forms, WCF web services and Windows Services. I spend much of my time in the Web Services (SOAP and REST) world in my current job designing and implementing various SOA architectures. I have been in the software engineering industry for about 6 years now and will not now nor ever consider myself an "expert" in programming because there is always so much to learn. My favorite thing about designing software is there are always new emerging technologies and something to learn every day! My current job has me spending much of my job on the bleeding edge of technologies and changing gears all the time, so I'm never bored and always challenged. On my spare time I enjoy weight training, reading and venturing to new places near by. Of course programing and learning new technologies are another hobby of mine.
This entry was posted in .NET, .NET 4.5, ASP.NET, C#, Databases, Generics, HTML, HTML Tags, JavaScript, JQuery, Programming and tagged , , , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s