Werden Iframes als "schlechte Praxis" angesehen? [geschlossen]


286

Irgendwann habe ich die Vorstellung aufgegriffen, dass die Verwendung von Iframes eine „schlechte Praxis“ ist.

Ist das wahr? Was sind die Vor- und Nachteile ihrer Verwendung?

Antworten:


217

Wie bei allen Technologien hat es seine Höhen und Tiefen. Wenn Sie einen Iframe verwenden, um eine ordnungsgemäß entwickelte Site zu umgehen, ist dies natürlich eine schlechte Praxis. Manchmal ist jedoch ein Iframe akzeptabel.

Eines der Hauptprobleme bei einem Iframe hat mit Lesezeichen und Navigation zu tun. Wenn Sie damit einfach eine Seite in Ihren Inhalt einbetten, ist das meiner Meinung nach in Ordnung. Dafür ist ein Iframe da.

Allerdings habe ich auch Iframes missbraucht gesehen. Es sollte niemals als integraler Bestandteil Ihrer Website verwendet werden, sondern als Inhalt einer Website.

Wenn Sie dies ohne Iframe tun können, ist dies normalerweise die bessere Option. Ich bin sicher, dass andere hier möglicherweise mehr Informationen oder spezifischere Beispiele haben. Alles hängt von dem Problem ab, das Sie lösen möchten.

Wenn Sie jedoch auf HTML beschränkt sind und keinen Zugriff auf ein Backend wie PHP oder ASP.NET usw. haben, ist manchmal ein Iframe Ihre einzige Option.


23
"Wenn Sie auf HTML beschränkt sind und keinen Zugriff auf ein Backend wie PHP oder ASP.NET usw. haben, ist manchmal ein Iframe Ihre einzige Option" ... das ist nicht wahr. Sie können externen Inhalt in Ihre Seite einbetten, indem Sie Daten über jquery ajax abrufen und dann ein div mit diesen Daten füllen.
Entwickler747

53
@ developer747 - Das funktioniert nicht, wenn sich der externe Inhalt aufgrund derselben Ursprungsrichtlinie auf einer anderen Site befindet . In einigen undurchsichtigen Fällen unterstützt der Remote-Standort möglicherweise JSONP . aber wahrscheinlich nicht.
Peter V. Mørch

2
Ich denke, iframes sind viel weniger nützlich als das frühere Frameset, da iframes vom Benutzer nicht in der Größe geändert werden können - aber ich würde ein Frameset nur für ein Handbuch verwenden, da es in HTML5 nicht mehr vorhanden ist. Beispiel: Game Maker Handbuch
Domino

15
Es sollte erwähnt werden, dass iframes derzeit die einzige Möglichkeit sind, einen verschachtelten CSS-Bereich zu definieren. Sie isolieren das innere Markup, Layout, Stil und Javascript * vom äußeren Dokument, was in vielen Anwendungsfällen und Anwendungen nützlich ist. * Javascript wird nicht isoliert, wenn das innere Dokument den Ursprung mit dem äußeren teilt. Auf der anderen Seite können Dokumente unterschiedlicher Herkunft weiterhin kommunizieren, indem sie window.postMessage()beispielsweise die kollaborative automatische Größenänderung von Iframes implementieren.
Tobia

1
Der iFrame ist böse! kann auch helfen
DanielV

75

Sie sind keine schlechte Praxis, sie sind nur ein weiteres Werkzeug und sie erhöhen die Flexibilität.

Zur Verwendung als Standardseitenelement ... sind sie gut, da sie eine einfache und zuverlässige Möglichkeit sind, Inhalte auf mehrere Seiten aufzuteilen. Insbesondere für benutzergenerierte Inhalte kann es nützlich sein, interne Seiten in einem iframeso schlechten Markup zu "sandboxen", dass die Hauptseite nicht beeinträchtigt wird. Der Nachteil ist, dass iframeIhre Benutzer frustriert sind, wenn Sie mehrere Bildlaufebenen einführen (eine für den Browser, eine für den ). Wie adzm sagte, möchten Sie keine iframefür die primäre Navigation verwenden, sondern sie als Text / Markup betrachten, der der Art und Weise entspricht, wie ein Video oder eine andere Mediendatei eingebettet wird.

Bei der Skripterstellung von Hintergrundereignissen können Sie im Allgemeinen zwischen ausgeblendeten iframeund XmlHttpRequestgeladenen Inhalten für die aktuelle Seite wählen. Der Unterschied besteht darin, dass a iframeeine Seitenladung generiert, sodass Sie mit den meisten Browsern im Browser-Cache vor- und zurückgehen können. Beachten Sie, dass Google, das XmlHttpRequestüberall verwendet, iframein bestimmten Fällen auch s verwendet , damit sich ein Nutzer im Browserverlauf vor- und zurückbewegen kann.


11
Ich denke, es ist wichtig zu erwähnen, dass iframes verwendet werden können, um eine Seite aus einer Domain in eine Seite aus einer anderen Domain einzubetten. Wenn die eingebettete Seite Benutzern Cookies folgen und diese Informationen von der Hostdomäne fernhalten möchte, besteht Ihre einzige Option darin, einen Iframe zu verwenden, da JS unter der Kontrolle der Hostdomäne steht.
Nicholas Leonard

@NicholasLeonard Ein gutes Beispiel ist, dass Sie damit den auf Localstorage basierenden Cache erzwingen können, indem Sie die Indexseite zu einem Skript machen, das erkennt, ob sich die Unterseite in Localstorage befindet. Dokumentieren Sie dann document.write aus localstorage, falls vorhanden, und fügen Sie dieser Unterseite einen iframe hinzu, wenn dies nicht der Fall ist. Haben Sie auf dieser Unterseite ein Skript, um die äußere HTML des Unterseiten-HTML-Elements in localstorage zu speichern. Ein WIRKLICH guter Grund, diese Methode zu verwenden, ist, dass Sie damit einen Ladebildschirm hinzufügen können.

Ich bin anderer Meinung, aber ich kann es nicht ablehnen, weil es ein wichtiger POV ist.
Victorf

28

Es ist eine „schlechte Praxis“, sie zu verwenden, ohne ihre Nachteile zu verstehen. Adzms Post fasst sie sehr gut zusammen.

Auf der anderen Seite nutzt Google Mail iFrames im Hintergrund stark für einige seiner cooleren Funktionen (wie das automatische Hochladen von Dateien). Wenn Sie sich der Einschränkungen von iFrames bewusst sind, sollten Sie meiner Meinung nach keine Schwierigkeiten haben, diese zu verwenden.


18

Nachdem ich unter vielen Umständen mit ihnen gearbeitet habe, bin ich wirklich zu dem Schluss gekommen, dass Iframes das Webprogrammierungsäquivalent der goto-Anweisung sind. Das heißt, etwas, das allgemein vermieden werden sollte. Innerhalb einer Site können sie etwas nützlich sein. Cross-Site sind sie jedoch fast immer eine schlechte Idee für alles andere als den einfachsten Inhalt.

Berücksichtigen Sie die Möglichkeiten ... Wenn sie für parametrisierte Inhalte verwendet werden, haben sie eine Schnittstelle erstellt. Und auf einer professionellen Website erfordert diese Schnittstelle eine SLA- und Versionsverwaltung - die fast immer in Eile ignoriert werden, um online zu gehen.

Bei Verwendung für aktiven Inhalt - Frames, die das Skript hosten - gelten die (unterschiedlichen) domänenübergreifenden Skriptbeschränkungen. Einige können gehackt werden, aber selten konsequent. Und wenn Ihr gerahmter Inhalt interaktiv sein muss, wird es schwierig sein, dies über den Rahmen hinaus zu tun.

Bei Verwendung mit lizenzierten Inhalten werden die teilnehmenden Websites durch die Notwendigkeit belastet, Berechtigungsinformationen zwischen den Hosts aus dem Band zu verschieben.

Obwohl sie gelegentlich innerhalb einer Site nützlich sind, sind sie für Mashups eher ungeeignet. Sie sehen echte Portale und Portlets viel besser. Schlimmer noch, sie sind ein Liebling jedes Webamateurs - viele Tech-Manager haben sie als Lösung für viele Probleme belagert. In der Tat schaffen sie mehr.


10

Nach meiner Erfahrung ist eine positive Seite für iframe das Aufrufen von Codes von Drittanbietern, bei denen möglicherweise ein Javascript aufgerufen wird, das einen Document.write();Befehl aufruft . Wie Sie vielleicht wissen, können diese Befehle aufgrund der Analyse (DOM-Parser usw.) nicht asynchron aufgerufen werden. Ein Beispiel hierfür ist http://sourceforge.net/projects/phpadsnew/. Ich habe iframes verwendet, um unsere Website zu beschleunigen, da mehrere Aufrufe von phpadsnews aufgetreten sind und die Website auf die Antwort gewartet hat, bevor sie mit dem Rendern fortfuhr Teile der Seite. Mit einem Iframe konnte ich der Site erlauben, andere Teile der Seite zu rendern und trotzdem den Document.write()Befehl von phpads asynchron aufzurufen. Verhindern und Sperren.


8

Es gibt definitiv Verwendungszwecke für Iframes. Wie würden Sie sonst das Wetternetzwerk-Widget auf Ihre Seite setzen? Die einzige andere Möglichkeit besteht darin, das XML abzurufen und zu analysieren, aber dann benötigen Sie natürlich Bedingungen, um die permanenten Wettergrafiken anzuzeigen ... das ist es nicht wirklich wert, aber viel sauberer, wenn Sie Zeit haben.


6

Das ursprüngliche Frameset-Modell (Frameset und Frame-Elemente) war vom Standpunkt der Benutzerfreundlichkeit aus sehr schlecht. IFrame war eine spätere Erfindung, die nicht so viele Probleme hatte wie das ursprüngliche Frameset-Modell, aber ihren Nachteil hat.

Wenn Sie dem Benutzer erlauben, innerhalb des IFrames zu navigieren, funktionieren Links und Lesezeichen nicht wie erwartet (da Sie die URL der äußeren Seite, aber nicht die URL des Iframes mit einem Lesezeichen versehen).


1
Ich muss nicht zustimmen ... ein breiter Kommentar wie dieser ist überhaupt nicht qualifiziert.
Dawesi

5

Wenn Ihre Hauptseite im HTTP-Protokoll geladen wird und Teile Ihrer Seite im HTTPS-Protokoll arbeiten müssen, kann iFrame jsonp zweifellos schlagen.

Insbesondere, wenn Ihr Datentyp nicht nativ json ist und auf dem Server in json übersetzt und auf dem Client zurück in z. B. komplexes HTML übersetzt werden muss.

Also nein - iFrame ist nicht böse.


5

Sie sind nicht schlecht, aber tatsächlich hilfreich. Ich hatte vor einiger Zeit ein großes Problem, bei dem ich meinen Twitter-Feed einbetten musste, und es ließ md es einfach nicht auf derselben Seite tun, also stellte ich es auf eine andere Seite und fügte es als Iframe ein.

Sie sind auch gut, weil alle Browser (und Telefonbrowser) sie unterstützen. Sie können nicht als schlechte Praxis angesehen werden, solange Sie sie richtig verwenden.


4

Es ist erwähnenswert, dass Iframes unabhängig von der Geschwindigkeit der Internetverbindung Ihrer Benutzer oder dem Inhalt des Iframes eine kleine (etwa 0,3 Sekunden), aber spürbare Verlangsamung der Geschwindigkeit verursachen, mit der Ihre Seite heruntergeladen wird. Dies wird beim lokalen Testen nicht angezeigt. Eigentlich gilt dies für jedes Element, das einer Seite hinzugefügt wird, aber iframes scheinen schlechter zu sein.


1
Warum? Und ist dies eine Möglichkeit, die Iframes nach dem Laden der Hauptseite zu laden?
Nicholas Leonard

3
Ich erinnere mich nicht, warum sie so langsam sind; Ich habe das vor einem Jahr recherchiert. Wahrscheinlich, weil der Browser im Grunde genommen für jeden Iframe einen völlig neuen Renderkontext erstellt. Damit sie erst nach Abschluss des Seitenladens geladen werden, können Sie einen leeren Iframe verwenden und nach Abschluss des Seitenladens das src-Tag des Iframes festlegen. Beachten Sie jedoch, dass selbst ein leerer Iframe das Rendern Ihrer Seite verlangsamt, nicht jedoch das Herunterladen, sodass Ihre Benutzer immer noch etwas langsamer erscheinen.
Brian

3
Im Gegenteil, man könnte in Betracht ziehen, CDN (Content Delivery Networks) zu diskutieren, wenn auf Geschwindigkeit und iFrames verwiesen wird. Beachten Sie, dass der iFrame Ressourcen parallel herunterladen kann und somit die Geschwindigkeit erhöht (abhängig vom Browser). Hier ist mindestens eine weitere Referenz, die mit meiner Position übereinstimmt. developer.yahoo.com/performance/rules.html
Strixy

2
@Strixy: Die von Ihnen angegebene URL besagt, dass IFrames teuer sind, auch wenn sie leer sind. Es wird empfohlen, die Verwendung von IFrames zu minimieren. Die Verwendung eines CDN zur Beschleunigung Ihrer Site ist orthogonal zur Verwendung von IFrames. Ein CDN kann dazu beitragen, die Kosten für die Verwendung eines IFrames zu senken. CDN ohne IFrame ist jedoch besser als CDN und IFrame.
Brian

1
@Strixy: Wenn Sie Ressourcen parallel herunterladen möchten, gibt es bessere Möglichkeiten. Die alte Schärfe ist, all das Zeug über Javascript zu laden. Die neue Aufgabe besteht darin, einen Service-Worker zu verwenden, mit dem Sie mithilfe der clientseitigen Logik direkt verwalten können, wie der Benutzeragent Site-Ressourcen lädt, vorlädt und zwischenspeichert. Die andere neue Hotness ist http / 2 Push, mit dem Sie Ressourcen an den Browser senden können, ohne darauf warten zu müssen, dass der Browser nach ihnen fragt. Da der http / 2-Cache jedoch nach anderen Browser-Caches überprüft wird , ist er für diesen Zweck häufig eine schlechte Wahl.
Brian

3

Ich habe gesehen, dass IFRAMEs sehr erfolgreich angewendet wurden, um auf einfache Weise dynamische Kontextmenüs zu erstellen, aber die Zielgruppe dieser Web-App waren nur Internet Explorer-Benutzer.

Ich würde sagen, dass alles von Ihren Anforderungen abhängt. Wenn Sie sicherstellen möchten, dass Ihre Seite in jedem Browser gleich gut funktioniert, vermeiden Sie IFRAMEs. Wenn Sie eine enge und bekannte Zielgruppe ansprechen (z. B. im lokalen Intranet) und einen Vorteil bei der Verwendung von IFRAMEs sehen, würde ich sagen, dass dies in Ordnung ist.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.