I want to display pdf file view in a division on a webpage for reading. I was using iframe for that. But as i searched about it. iframe is deprecated in html5.
Any other compatible(non flash and if possible not html5) way to show pdf content on webpage just like a pdf displayed with an iframe?
The <iframe> is not deprecated at all. At least, the current HTML5 spec draft on <iframe> doesn't say anything about deprecation. In the future please read the specification itself before making ungrounded assumptions.
There's however an alternative to the <iframe> which allows graceful degradation: the <object> tag which in the below example gracefully degrades to a link when the specified content type is not supported by the browser nor any of its plugins (you know, displaying a PDF file inline requires the Acrobat Reader plugin).
<object data="/url/to/file.pdf" type="application/pdf" width="500" height="300">
Download file.pdf
</object>
This is a perfectly acceptable use of an iframe. It has not been deprecated in HTML5, it even has three new tags (sandbox, seamless, and srcdoc). Or you can use <object> as the other answer suggests.
Related
<object data="test.pdf" type="application/pdf" width="300" height="200">
alt : test.pdf
</object>
The above code displays the PDF content in html. Whether <object> tag requires any plugin(adobe or any other third party) to display pdf file or it is HTML capabilities.
Please clarify the same?
It depends on the browser. Some have native support for the PDF file format, others do not.
Tag <object> requires plugins.
This tag only provides the browser with the information which browser need to know to display the content of the tag, because initially the browser don't know how to display it to the user.
Also, the text between the <object> and </object> is an alternate text, for browsers that do not support this tag.
Moreover, notice that a lot of attributes of this tag isn't supported by HTML5. More details here.
I have used the tag to embed a pdf file.
<iframe id="iframepdf" src="files/example.pdf"></iframe>
This works fine in Chrome, IE8+, Firefox etc, but for some reason, when some people are viewing it in IE8, the files are downloading instead of embedding. I know this browser is outdated but it is the standard browser within my office and as such, the website has to be designed for this.
Does anyone have any ideas on why this is happening, how I can fix it or else put an error message instead of letting the files download?
It's downloaded probably because there is not Adobe Reader plug-in installed. In this case, IE (it doesn't matter which version) doesn't know how to render it, and it'll simply download the file (Chrome, for example, has its own embedded PDF renderer).
If you want to try to detect PDF support you could:
!!navigator.mimeTypes["application/pdf"]?.enabledPlugin (now deprecated, possibly supported only in some browsers).
navigator.pdfViewerEnabled (live standard, it might change and it's not currently widely supported).
2021: nowadays the original answer is definitely outdated. Unless you need to support relatively old browsers then you should simply use <object> (eventually with a fallback) and leave it at that.
That said. <iframe> is not best way to display a PDF (do not forget compatibility with mobile browsers, for example Safari). Some browsers will always open that file inside an external application (or in another browser window). Best and most compatible way I found is a little bit tricky but works on all browsers I tried (even pretty outdated):
Keep your <iframe> but do not display a PDF inside it, it'll be filled with an HTML page that consists of an <object> tag. Create an HTML wrapping page for your PDF, it should look like this:
<html>
<body>
<object data="your_url_to_pdf" type="application/pdf">
<div>No online PDF viewer installed</div>
</object>
</body>
</html>
Of course, you still need the appropriate plug-in installed in the browser. Also, look at this post if you need to support Safari on mobile devices.
Why an HTML page? So you can provide a fallback if PDF viewer isn't supported. Internal viewer, plain HTML error messages/options, and so on...
It's tricky to check PDF support so that you may provide an alternate viewer for your customers, take a look at PDF.JS project; it's pretty good but rendering quality - for desktop browsers - isn't as good as a native PDF renderer (I didn't see any difference in mobile browsers because of screen size, I suppose).
If the browser has a pdf plugin installed it executes the object, if not it uses Google's PDF Viewer to display it as plain HTML:
<object data="your_url_to_pdf" type="application/pdf">
<iframe src="https://docs.google.com/viewer?url=your_url_to_pdf&embedded=true"></iframe>
</object>
Iframe
<iframe id="fred" style="border:1px solid #666CCC" title="PDF in an i-Frame" src="PDFData.pdf" frameborder="1" scrolling="auto" height="1100" width="850" ></iframe>
Object
<object data="your_url_to_pdf" type="application/pdf">
<embed src="your_url_to_pdf" type="application/pdf" />
</object>
Try this out.
<iframe src="https://docs.google.com/viewerng/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" frameborder="0" height="100%" width="100%">
</iframe>
Use Adobe Embed PDF API. This is the solution i used in the end, Works perfectly.
What is the best way to embed a webpage inside a webpage for maximum support and according to standards?
I've heard an <object> with an <embed /> inside and <iframe /> alone.
Which is better and more proper to use; and more importantly, work more of the time?
<iframe> is fine, it was actually updated with the HTML 5 spec.
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe for attribute status (deprecated, non-standard, new) and browser support.
<object> and <embed> are often plugin related. If you want to show another page of your site, e.g., http://www.example.com/page2.html, on http://www.example.com/page1.html, use this on page1.html:
<iframe id="myIframe" src="http://www.example.com/page2.html"></iframe>
Height, width, borders, etc. can be defined in CSS.
Using an <iframe> is the correct way to do it. Tutorial on IFRAME: http://manda.com/iframe/
In an <object> tag, you can put alternate content, like this:
<object data="image.svg" type="image/svg+xml">
<img alt="Image" src="image.png"/>
</object>
Is there a way to do the same (or something similar) with <embed> tag?
I suppose Javascript could be a solution, but I'm looking for something with only HTML.
I'm sorry to say that embedding arbitrary data types is not yet possible. When loaded by a browser most unrecognized mime types get interpreted as plain HTML.
It's pretty hard to get even basic media types to embed -- see audio and video, which are just starting to gain popular acceptance with HTML5. Most object tags you see are likely restricted to media types that are possible to load via proprietary desktop/browser extensions.
The age old question. <object> vs <embed>. From what I gather, <object> is the XHTML-compliant way of doing things, while <embed> is for legacy support. I'm currently building a Flash application that will contain a pre-made embedding code for users to copy and paste, and I'm wondering if it's feasible to simply dump the <embed> tag altogether.
Which browsers would be unable to load my application if I gave my users an <object>-only embed code?
Thanks :)
HTML4/XHTML1 only knows <object> and <applet> for the embedding of multimedia content, though the <embed> tag like the <object> is supported by all common browsers AFAIK.
With HTML5 <embed> will be included in the specification (in addition to the <object> tag), whereas the <applet> is going to be removed. In addition, there will be new tags like <audio>, <canvas>, <svg> and <video>.
As far as I understand the HTML5 specs, flash contents can be included with both - <embed> and <object>.