Was ist zum Beispiel der Unterschied zwischen diesen:
<iframe srcdoc="<p>Some HTML</p>"></iframe>
<iframe src="data:text/html,<p>Some HTML</p>"></iframe>
Und falls sie genau gleich sind, warum hat HTML5 ein srcdoc
Attribut hinzugefügt ?
Bearbeiten
Vielleicht war ich nicht klar genug. Ich vergleiche nicht src
mit srcdoc
, sondern src
verwende Text / HTML-Daten-URI mit srcdoc
.
Dann, wenn das Funktionsdiagramm so ist
| src Attribut | srcdoc-Attribut -------------------------------------------------- ------------------ ------------------. URL | Ja | Nein ohne src (*) HTML-Inhalt | Ja, mit Daten-URI | Ja
warum wird srcdoc
benötigt?
(*) Hinweis :
Es scheint srcdoc
verwendet werden zu können, um eine Seite nach URL ( Demo ) zu laden , wobei ein Unterrahmen mit dem src
Attribut verwendet wird:
<iframe srcdoc="<iframe src='http://microsoft.com'></iframe>"></iframe>
sandboxedsrc
Attribut, das eine [Daten] URI akzeptiert? (Es würde auch verhindern, dass ein zukünftiger Browser srcdoc implementiert, ohne Sandbox zu implementieren.)Von MDN:
Das
srcdoc
Attribut überschreibt also den mit demsrc
Attribut eingebetteten Inhalt .Demo
Außerdem wird das, was Sie über das folgende Snippet sagen,
data:text/html
als Daten-URI bezeichnet und weist Einschränkungen auf.1. MDN , 2. MSDN
quelle
srcdoc
Attribut überschreibt also den mit demsrc
Attribut eingebetteten Inhalt ." Anscheinend nicht in Firefox 24, ich sehe zwei IFrames mit der Microsoft-Website darin.srcdoc
ist 25 ( developer.mozilla.org/en-US/docs/Web/HTML/Element/… )Iframe mit
src
Attribut mit HTML-Inhalt ist domänenübergreifend,Iframe mit
srcDoc
Attribut mit HTML-Inhalt ist jedoch nicht domänenübergreifendquelle
Zum Zeitpunkt des Schreibens ermöglicht srcdoc in Chrome (v36) das Setzen und Abrufen von Cookies, während die Verwendung von src mit Daten-URL nicht:
Dies mag für Sie wichtig sein oder auch nicht, schließt jedoch die Verwendung von Daten-URLs in der von mir erstellten Anwendung aus, was schade ist, da der IE derzeit srcdoc (v11) natürlich nicht unterstützt.
quelle
srcdoc
funktionieren daher in diesen Fällen besser.Ein weiterer bemerkenswerter Unterschied besteht darin, dass
src
Attribute mit Daten-URI URI-Prozentcodierungsregeln unterstützen, währendsrcdoc
dies nicht der Fall ist, da sie die reguläre HTML-Syntax unterstützen.Diese Quellen ergeben unterschiedliche Ergebnisse:
<iframe srcdoc="<p>hello%20world</p><h1>give%0D%0Ame%0D%0Asome%24</h1>"></iframe> <iframe src="data:text/html;charset=UTF-8,<p>hello%20datauri<p><h1>give%0D%0A me%0D%0Asome%24</h1>"></iframe>
Ich habe auch einen Unterschied beim Parsen von js-Skripten innerhalb des Attributwerts festgestellt (es ist wahrscheinlich mehr als nur eine prozentuale Codierung), aber ich habe die Regel noch nicht herausgefunden ...
quelle
src
muss URL-codiert sein, um korrekt behandelt zu werden. In dieser Frage finden Sie Einzelheiten dazu.In Ihrem Beispiel sind die beiden Formen funktional identisch. Sie können jedoch beide
src
undsrcdoc
Attribute verwenden, sodass Nicht-HTML5-Browser diesrc
Version verwenden können, während HTML5-Browser diesrcdoc
Version zusammen mit den Attributensandbox
und verwenden könnenseamless
, die mehr Flexibilität bei der Behandlung eines iFrames bieten.quelle
sandbox
undseamless
Attribute können auch mitsrc
Attributen verwendet werden, nicht wahr? Es scheint mir, dass essrc
flexibler ist alssrcdoc
srcdoc: Der Inhalt der Seite, die der eingebettete Kontext enthalten soll. Es wird erwartet, dass dieses Attribut zusammen mit der Sandbox und nahtlosen Attributen verwendet wird. Wenn ein Browser das srcdoc-Attribut unterstützt, überschreibt er den im src-Attribut angegebenen Inhalt (falls vorhanden). Wenn ein Browser das srcdoc-Attribut NICHT unterstützt, wird stattdessen die im src-Attribut angegebene Datei angezeigt (falls vorhanden).
src: Die URL der einzubettenden Seite.
quelle
src
Attribut kann jedoch auch den HTML-Inhalt der Seite enthalten, indem Daten-URIs verwendet werdenDer Hauptunterschied besteht darin, dass das Attribut 'src' die Adresse des Dokuments enthält, das Sie in das Tag einbetten möchten.
Andererseits enthält 'srcdoc'attribute den HTML-Inhalt der Seite, die im Inline-Frame angezeigt werden soll.
Der Hauptnachteil von srcdoc ist, dass es nicht in allen Browsern unterstützt wird, während src mit allen Browsern kompatibel ist.
Eine ausführliche Erklärung finden Sie unter folgendem Link: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
quelle
src
Attribut kann jedoch auch den HTML-Inhalt der Seite enthalten, indem Daten-URIs verwendet werden