I'm attempting to embed a PDF file into a HTML page using the object tag. The following HTML crashes Firefox 3.0.7:
<object id="pdfObject40" type="application/pdf" data="/file.ashx?id=40" width="432" height="600">
<param name="src" value="/file.ashx?id=40" />
</object>
I don't have a problem in Internet Explorer.
Check the MIME-type the ‘file.ashx’ script is returning. If it's something other than application/pdf, or Content-Disposition is getting sent, there might be wrinkles.
Otherwise, it can only be (a) something odd in the document — do other documents load OK? — or (b) your setup.
In any case I would personally avoid ever embedding a PDF in a web page. A PDF plugin is a pretty inconvenient way to view a document, and the Adobe Reader plugin in particular is both historically awfully unreliable in IE, and also an ongoing security disaster. I'm advising all my clients to uninstall it ASAP.
I ended up using that code for IE and failing over to a link with a about:blank in Firefox. If any has a solution, feel free to add. I'll accept it down the road.
Incase anyone else has this problem, I ended up using object element tag with Firefox and embed element tag with everything else.
I think if I'd not been serving the PDF through an .ashx I could have used the embed tag for everything.
See: http://blogs.adobe.com/pdfdevjunkie/2007/08/using_the_html_embed_tag_to_di.html
Related
I have the code below which is a perfect solution to what I need, which would essentially be embedding any of JPG, GIF, PNG or PDF files in my webpages. It works perfectly in PC browsers, but a critical requirement for the pages is to have them compatible in mobile browsers due to its target users.
<iframe src="uploads/test1.pdf" width="auto" height="auto"> </iframe>
Although image files work fine, PDF files are opened separately in the mobile browser and not embedded inline in the web page. What would be an alternative solution or implementation to this?
You can use PDFJs library. Using just JS you can render pdf files.
Please , check here : https://mozilla.github.io/pdf.js/
One simple option is that the the object element provides a fallback, so you can do:
<object data='some.pdf'>
<p>Oops! Your browser doesn't support PDFs!</p>
<p>Download Instead</p>
</object>
Then, when the mobile browser can't get the item, it'll just show this and you'll be all set, kinda.
Here is my solution to this problem.
<object data="mypdf.pdf" type="application/pdf" frameborder="0" width="100%" height="600px" style="padding: 20px;">
<embed src="https://drive.google.com/file/d/1CRFdbp6uBDE-YKJFaqRm4uy9Z4wgMS7H/preview?usp=sharing" width="100%" height="600px"/>
</object>
Explanation:
<object> tag has a feature that when it is unable to load item, it loads the content inside itself i.e tag.
Since object tag cannot load on mobile view, therefore on mobile devices, embed tag will become active.
Q) Why can't we directly use tag for all cases?
You can actually, but since the embed tag is loading file from
drive, it does not gives any user controls for the pdf that we see
with object tag (zoom, page no., etc.). So our code will give the user pdf view controls atleast in the desktop mode instead of not giving any controls at all.
Q) Direct drive links don't work....so why this solution?
In the above google drive URL, view is changed to preview.
drive.google.com/file/d/1CRFdbp6uBDE-YKJFaqRm4uy9Z4wgMS7H/view?usp=sharing
becomes,
drive.google.com/file/d/1CRFdbp6uBDE-YKJFaqRm4uy9Z4wgMS7H/preview?usp=sharing
So, we can make direct drive links work with this little modification
Google Docs viewer offers a feature, that lets you embed PDF files and PowerPoint presentations on a web page.
<iframe src="https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:100%; height:650px;" frameborder="0"></iframe>
replace the URL(http://infolab.stanford.edu/pub/papers/google.pdf) with your own address, It's worked for me but it takes more time to load on
src:http://googlesystem.blogspot.com/2009/09/embeddable-google-document-viewer.html?utm_source=pocket_mylist
The only way I have found, which allows you to embed pdf is using Google drive, then select the menu button once you have opened your file, and select get embed code, you can only use a Google drive or Google docs reference. And you must also turn public sharing on otherwise others won't be able to view it without permission.
Using Adobe PDF Embed API solved my problem.
Adobe PDF Embed API
I ran into the same issue. As a new developer, I wasn't aware that mobile browsers have issues embedding PDF files in iframes. I am now... lol
I racked my resources trying to get this to work when it dawned on me that mobile browsers do not have an issue displaying PNG files in a new window. So, in my infinite wisdom, I opened the PDF files in Gimp 2.0 then exported them as PNG files. And then I created buttons for the user to click and now it opens the graphic instead of trying to embed the PDF.
Looks like this:
<input class="AG" id="UnityBtn" type="button" value="Unity" onclick="location.href='../Meeting_Info/Unity.png'" />
I don't know if this is possible for you, but it worked beautifully for me.
Use an object tag with a iframe tag inside your object tags.
The object data can be a pdf or png file by changing the type and can use any link you want stored wherever, however the I frame is the one which will be loaded for mobiles which has to be a link from Google drive or Google docs you also need to allow the files to be shared public otherwise others won't be able to view them.
I would share the code but this site has some rubbish rules about code and won't let me share them so I'll leave you to Google how object and iframe tags work by viewing better sites that actually wants the help from developers.
Have fun guys!
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.
There's a section on my site where I display data from another site, using:
<embed src="URL"></embed>
I recently discovered that this works fine for most people, but that Firefox users get an error telling them they need to install a plugin. I searched around for a solution and people seemed to find that specifying the MIME type worked:
<embed type="text/html" src="URL"></embed>
But this isn't working. I can switch to iFrames, but I dislike how they display the information. Any other suggestions?
Per spec, embed elements are only handled via plug-ins or an SVG renderer (and in the latter case behave just like iframe).
You can do <object data="URL"></object>, but of course that will also behave like iframe...
I've been having the same issue with an html5 game. It appears that Firefox doesn't support if you want to embed an external html file. This tag should only be used for plugins.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed
To embed an external html file into another page in Firefox you have to use iframe or object tags instead. For the interactive nature of my external page I used iframe and it worked in IE / Chrome and FF, I had to make the margins larger than the game itself.
I'm building a WSS site which has to show SVG files stored on WSS.
I'm trying to use <object> tag to show it and it doesn't show, however, if I use <embed> it works ok. Im'using IE8 and IE7
I've been reading and everyone tells IE prefers <Object> over <embed>, but in WSS it doesn't work this way.
To display the file I'm using a web content editor webpart with this code:
<object type="image/svg+xml" data="/samples/sample.svg"
name="owMain" width="400" height="150">
</object>
Any clue??
I've found that it's not actually necessary to embed SVG as an object.
If you use the SVGWeb JavaScript library, you can actually put your SVG into a normal Content Editor Web Part via the Source Editor, and manipulate the SVG elements via JavaScript.
The library can also work with a referenced SVG file as an object, but I haven't tried that option.
The library is hosted on code.google.com
You cannot add object tags to the html content of a page in WSS. The issue is that the object tag can be used in lots of very bad ways, so it is stripped out by the underlying engine.
You have found that the content editor webpart does not suffer from the same limitations.
The first step, if you haven't already, is to confirm that the HTML content in the response is as you expect (e.g. view source). If it isn't then you've found your issue. If it is, the next step might be to use a debugging proxy like Fiddler to confirm that all of the related requests are being made and handled as you expect. If they're not then you've found your issue (e.g. security). If they are then by the process of elimination you can safely conclude that either the markup or the browser is lacking.
Is it me or IE does not support SVG? Well, it kinda does but it is tricky and it's to draw, not to show svg files. ... If you open with FF can you see what you are expecting?
added
I made an svg draw in IE ... it's not the same, I know, but it's something that you can read and test: stackoverflow.com/questions/536676
I managed to do this on IE7/8 with the following Html:
<embed width="600" height="450" id="objMapView" src="http://XXXXXXXX/file.svgz"
type="image/svg+xml" name="objMapView" border="1"/>
It works Ok bur requires adobe's SVG Plugin
I am experiencing some strange behavior of embedded audio (wav file) on HTML page.
I've got a page https://server.com/listen-to-sound, and a Wav file embedded in it via <EMBED/> tag, like this:
<embed src='https://server.com/path-to-sound' hidden="true" autostart="true" />
The page https://server.com/listen-to-sound is opened in IE 6 SP3 on machine#1 - the sound is played in the headphones.
The same page is opened on another machine(#2), with exactly same IE 6 SP3 version, privacy and proxy settings - there's no sound.
Totally, from 6 machines the sound is played on 2 and not played on 4. From these 4 machines, when the page https://server.com/listen-to-sound is opened in Opera, the sound is played.
I've triple-checked headphone connections, volume settings and other possible hardware and software driver issues: the problem is definitely in IE settings.
I've also checked https://server.com/path.to.sound URL - the 4 machnies that do not play sound fail to open this link, failing with an error like "Failed to download page".
Cleaning IE caches, temporary internet files, SSL certificate caches did not solve the problem either.
Googling gave me nothing special but old Flash trick to use <OBJECT> tag and <EMBED> tag to be written in Object's comments.
What have I missed? Have you experienced similar or related problems? How were they solved?
Do you have any suggestions on where the trick is? Do you know some IE "features" that might affect execution(playing, showing) of embedded objects?
I think the main reason is acting different on each computer/browser you're using is because it is a non-standard tag.
Getting media to play inside a web page has always been a bit of a pain. You may try something like this:
<object type="audio/x-wav" data="data/test.wav" width="200" height="20">
<param name="src" value="data/test.wav">
<param name="autoplay" value="false">
<param name="autoStart" value="0">
alt : test.wav
</object>
The above was taken from this site explaining how to use the object tag.
I have not found the solution, but I can confirm that the likely problem is the https:. I have found that windows media player does not play files with a full url/src leading to https. However, quicktime will. So, computers with quicktime will successfully play the file back while those with only WMP will fail.
One "solution" is to link to the http: (non-secure) version of the file.
I could'nt find any informations on this, but have you tried playing sound from Javascript ? I don't know if it's a viable workaround for you but this might be a solution.
You can find different ways to do it here: http://www.phon.ucl.ac.uk/home/mark/audio/play.htm
Hope that will help you.
In regard to your comment to jamesh, I would advise to provide instead a link to the audio file: some computers (mine at work) have no sound, not everybody is using IE, embed isn't part of HTML (it is a hack supported by various browsers, it isn't defined in HTML 4.01 Transitional DTD for example) and chances are the visiting browser have no plug-in to play your sound.
As your tests show, it is prone to problems...
At worst, provide a <NOEMBED> tag to supply the said link. Or nest various methods, like <object>. At least, Flash is supported by nearly all browsers.
Somewhere along the way, browsers changed operations like using flash and playing audio. I have tried java, html embeded code none is exact.. the only thing i noticed is if you make a link on another page to the page that suppose to play the music it will work every time. but many times it wont play if you take and put your music page url in url box.. the link is reliable to the music page.. Don't know why?
I have been working for a while on it. and of course there the difference between all the various browsers. The embedded code embed src='https://server.com/path-to-sound' hidden="true" autostart="true" />you showed before should work as long a sound file is there and if placed as first line after body statement.