197

Which is the right/best tag to use in my HTML file when I want to display the Adobe PDF viewer?

Right now I'm using the code below, but there are weird side effects (e.g. it seems to steal the starting focus that I've set to another <input> text box; it doesn't seem to play real well with the jQueryUI Resizeable class; etc.)

<embed src="abc.pdf" type="application/pdf" />

Could I even do the same thing with the <object> tag? Are there advantages/disadvantages to using one tag vs. the other?

Alexander Abakumov
  • 13,617
  • 16
  • 88
  • 129
JayhawksFan93
  • 2,353
  • 3
  • 15
  • 11
  • 23
    And now with in HTML5? What is the best way? – VinnyG Apr 21 '11 at 02:20
  • @VinnyG `` is now officially a standard tag with HTML5, but you should anticipate at least *some* compatibility issues with older browser versions. – arkon Apr 07 '13 at 06:25

6 Answers6

202

OBJECT vs. EMBED - why not always use embed?

Bottom line: OBJECT is Good, EMBED is Old. Beside's IE's PARAM tags, any content between OBJECT tags will get rendered if the browser doesn't support OBJECT's referred plugin, and apparently, the content gets http requested regardless if it gets rendered or not.

object is the current standard tag to embed something on a page. embed was included by Netscape (along img) before anything like object were on the w3c mind.

This is how you include a PDF with object:

<object data="data/test.pdf" type="application/pdf" width="300" height="200">
  alt : <a href="data/test.pdf">test.pdf</a>
</object>

If you really need the inline PDF to show in almost every browser, as older browsers understand embed but not object, you'll need to do this:

<object data="abc.pdf" type="application/pdf">
    <embed src="abc.pdf" type="application/pdf" />
</object>

This version does not validate.

Esteban Küber
  • 36,388
  • 15
  • 79
  • 97
  • 51
    is actually part of HTML5 http://dev.w3.org/html5/spec/Overview.html#the-embed-element – Drew LeSueur Jun 01 '10 at 08:22
  • 9
    Even though `` is part of HTML5 standard, it seems to me that `` is the better choice because of compatibility with older browsers and the ability to display alternate content. Thoughts? – Raphael Sep 11 '12 at 16:02
  • 5
    @raphaelcm Allow me to play devil's advocate. If maintaining compatibility with outdated browsers was that important, HTML would never evolve. [What's important here is market share](http://www.w3counter.com/globalstats.php), specifically regarding browser versions. – arkon Apr 07 '13 at 06:32
  • I landed here to see if I can find an alternative to iframe. Get the same issues that I get for iframe on a safari browser in a ios device: doesn't display first unless you force it to re-render and does not scroll. – dreamerkumar Apr 22 '13 at 15:03
  • HTML 5 should have wither `object` or `embed` tag. Both together don't have different semantics. – Amit Kumar Gupta Oct 02 '13 at 12:06
  • 7
    Why is this accepted? I thought was the HTML5 standard tag. – fabspro Feb 27 '14 at 06:57
  • 1
    I have tried above solution. It's working fine in firefox but not in chrome. In firefox only element works but same in chrome shows alt msg in alt: error . And in chrome shows msg plugin not supported. – Kedar.Aitawdekar Sep 01 '14 at 14:47
  • 2
    I would think would be the better choice going forward. It's in the HTML5 standard while Object had many of it's features(attributes) deprecated to separate it's functionality from the embed tag. http://www.w3schools.com/tags/tag_object.asp It appears to me that the object tag is almost a 'Swiss army knife' tag while embed is purpose built for embedding content into a page. – cmaynard Apr 21 '15 at 12:40
  • 2
    One difference is that embed without a src yields an instance of the embedded feature. You can swap out the src attribute on an embed (with jquery for example), but you can't swap out the data attribute on an object. – okdewit Oct 11 '16 at 15:12
  • Does this work when I give the url of a pdf frile from internet ? – Jerry Dec 08 '17 at 14:02
  • Trying to do this ` ` but it says `src(unknown)` when I inspect it as nothing comes out its just blank. Any feedback, trying to grab the PDF from the local file its stored in 'trustTwo'. – Andrew Jun 27 '18 at 18:29
15

Answer updated for 2020:

Both <object> and <embed> are included in the WHAT-WG HTML Living Standard (Sept 2020).

<object>

The object element can represent an external resource, which, depending on the type of the resource, will either be treated as an image, as a child browsing context, or as an external resource to be processed by a plugin.

<embed>

The embed element provides an integration point for an external (typically non-HTML) application or interactive content.

Are there advantages/disadvantages to using one tag vs. the other?

The opinion of Mozilla Developer Network (MDN) appears (albeit fairly subtly) to very marginally favour <object> over <embed> but, overwhelmingly, MDN wants to recommend that wherever you can, you avoid embedding external content entirely.

[...] you are unlikely to use these elements very much — Applets haven't been used for years, Flash is no longer very popular, due to a number of reasons (see The case against plugins, below), PDFs tend to be better linked to than embedded, and other content such as images and video have much better, easier elements to handle those. Plugins and these embedding methods are really a legacy technology, and we are mainly mentioning them in case you come across them in certain circumstances like intranets, or enterprise projects.

Once upon a time, plugins were indispensable on the Web. Remember the days when you had to install Adobe Flash Player just to watch a movie online? And then you constantly got annoying alerts about updating Flash Player and your Java Runtime Environment. Web technologies have since grown much more robust, and those days are over. For virtually all applications, it's time to stop delivering content that depends on plugins and start taking advantage of Web technologies instead.

Source: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements

Rounin
  • 27,134
  • 9
  • 83
  • 108
  • 3
    There are other uses for both than plugins. SVG (which can also use or with subtle differences...) and PDF are two common ones. – DimeCadmium Jan 20 '22 at 17:29
6

Some other options:

<object type="application/pdf" data="filename.pdf" width="100%" height="100%">
</object>

<object type="application/pdf" data="#request.localhost#_includes/filename.pdf" 
        width="100%" height="100%">
  <param name="src" value="#request.localhost#_includes/filename.pdf">
</object>
jdh8
  • 3,030
  • 1
  • 21
  • 18
aguz
  • 71
  • 1
  • 1
4

You could also use the iframe method, although this is not cross browser compatible (eg. not working in chromium or android and probably others -> instead prompts to download). It works with dataURL's and normal URLS, not sure if the other examples work with dataURLS (please let me know if the other examples work with dataURLS?)

 <iframe class="page-icon preview-pane" frameborder="0" height="352" width="396" src="data:application/pdf;base64, ..DATAURLHERE!... "></iframe>
ejectamenta
  • 1,047
  • 17
  • 20
4

Probably the best cross browser solution for pdf display on web pages is to use the Mozilla PDF.js project code, it can be run as a node.js service and used as follows

<iframe style="width:100%;height:500px" src="http://www.mysite.co.uk/libs/pdfjs/web/viewer.html?file="http://www.mysite.co.uk/mypdf.pdf"></iframe>

A tutorial on how to use pdf.js can be found at this ejectamenta blog article

ejectamenta
  • 1,047
  • 17
  • 20
2

Embed is not a standard tag, though object is. Here's an article that looks like it will help you, since it seems the situation is not so simple. An example for PDF is included.

aehlke
  • 15,225
  • 5
  • 36
  • 45
  • 14
    Embed seems to be [quite standard](http://dev.w3.org/html5/spec/single-page.html#the-embed-element) to me - at least in HTML5. – kapa Jul 07 '12 at 02:08
  • 8
    @bažmegakapa It is certainly standard now with HTML5, but that article he is referring to was written back in 2008 and his answer is from 2009, which predates HTML5. – arkon Apr 07 '13 at 06:24