<embed> vs. <object>

164

Welches ist das richtige / beste Tag für meine HTML-Datei, wenn ich den Adobe PDF-Viewer anzeigen möchte?

Im Moment verwende ich den folgenden Code, aber es gibt seltsame Nebenwirkungen (z. B. scheint <input>es den Startfokus zu stehlen, den ich auf ein anderes Textfeld gesetzt habe; es scheint nicht wirklich gut mit der jQueryUI Resizeable-Klasse zu spielen; etc.)

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

Könnte ich das auch mit dem <object>Tag machen? Gibt es Vor- und Nachteile bei der Verwendung eines Tags gegenüber dem anderen?

html pdf embed-tag JayhawksFan93
quelle
21
Und jetzt mit <embed> in HTML5? Was ist der beste Weg?
VinnyG
@VinnyG <embed>ist jetzt offiziell ein Standard-Tag mit HTML5, aber Sie sollten zumindest einige Kompatibilitätsprobleme mit älteren Browserversionen erwarten .
b1nary.atr0phy

Antworten:

168

OBJECT vs. EMBED - warum nicht immer Embed verwenden?

Fazit: OBJEKT ist gut, EMBED ist alt. Neben den PARAM-Tags des IE wird jeglicher Inhalt zwischen OBJECT-Tags gerendert, wenn der Browser das von OBJECT angegebene Plugin nicht unterstützt, und anscheinend wird der Inhalt http-angefordert, unabhängig davon, ob er gerendert wird oder nicht.

objectist das aktuelle Standard-Tag, um etwas in eine Seite einzubetten. embedwurde von Netscape (zusammen eingeschlossen img) , bevor etwas objectauf dem waren w3c Geist.

So fügen Sie ein PDF hinzu mitobject :

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

Wenn Sie das Inline-PDF wirklich benötigen , um es in fast jedem Browser anzuzeigen, wie ältere Browser verstehen, embedaber nicht object, müssen Sie Folgendes tun:

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

Diese Version wird nicht validiert .

Esteban Küber
quelle
47
< embed
Drew LeSueur
7
Obwohl dies <embed>Teil des HTML5-Standards ist, scheint es mir <object>die bessere Wahl zu sein, da es mit älteren Browsern kompatibel ist und alternative Inhalte anzeigen kann. Gedanken?
Raphael
4
@raphaelcm Erlaube mir, den Anwalt des Teufels zu spielen. Wenn die Kompatibilität mit veralteten Browsern so wichtig wäre, würde sich HTML niemals weiterentwickeln. Was hier wichtig ist, ist der Marktanteil , insbesondere in Bezug auf Browserversionen.
b1nary.atr0phy
7
Warum wird das akzeptiert? Ich dachte, <embed> sei das HTML5-Standard-Tag.
Fabspro
2
Ich würde denken, <embed> wäre in Zukunft die bessere Wahl. Es ist im HTML5-Standard enthalten, während Object viele seiner Features (Attribute) veraltet hatte, um seine Funktionalität vom Embed-Tag zu trennen. w3schools.com/tags/tag_object.asp Es scheint mir, dass das Objekt-Tag fast ein "Schweizer Taschenmesser " -Tag ist, während das Einbetten speziell zum Einbetten von Inhalten in eine Seite erstellt wurde.
cmaynard
5

Einige andere Optionen:

<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>
aguz
quelle
3

Sie können auch die iframe-Methode verwenden, obwohl diese nicht browserübergreifend kompatibel ist (z. B. funktioniert sie nicht in Chrom oder Android und wahrscheinlich auch in anderen -> fordert stattdessen zum Herunterladen auf). Es funktioniert mit dataURLs und normalen URLs, nicht sicher, ob die anderen Beispiele mit dataURLS funktionieren (bitte lassen Sie mich wissen, ob die anderen Beispiele mit dataURLS funktionieren?)

 <iframe class="page-icon preview-pane" frameborder="0" height="352" width="396" src="data:application/pdf;base64, ..DATAURLHERE!... "></iframe>
Auswurf
quelle
3

Die wahrscheinlich beste browserübergreifende Lösung für die PDF-Anzeige auf Webseiten ist die Verwendung des Mozilla PDF.js-Projektcodes. Er kann als node.js-Dienst ausgeführt und wie folgt verwendet werden

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

Ein Tutorial zur Verwendung von pdf.js finden Sie in diesem Ejectamenta-Blog-Artikel

Auswurf
quelle
1

Einbetten ist kein Standard-Tag, Objekt jedoch. Hier ist ein Artikel , der Ihnen helfen wird, da die Situation anscheinend nicht so einfach ist. Ein Beispiel für PDF ist enthalten.

aehlke
quelle
12
Das Einbetten scheint mir Standard zu sein - zumindest in HTML5.
Kapa
6
@ bažmegakapa Es ist sicherlich Standard bei HTML5, aber dieser Artikel, auf den er sich bezieht, wurde 2008 geschrieben und seine Antwort stammt aus dem Jahr 2009, das älter ist als HTML5.
b1nary.atr0phy
2
@ b1naryatr0phy Deshalb habe ich den Kommentar hinzugefügt. Er sollte die Antwort meiner Ansicht nach entweder aktualisieren oder entfernen, da sie nicht mehr relevant ist und zukünftigen Besuchern nicht hilft.
Kapa