Was ist der Unterschied zwischen srcdoc = "..." und src = "data: text / html, ..." in einem <iframe>?

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>

Demo

Und falls sie genau gleich sind, warum hat HTML5 ein srcdocAttribut hinzugefügt ?

Bearbeiten

Vielleicht war ich nicht klar genug. Ich vergleiche nicht srcmit srcdoc, sondern srcverwende 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 srcdocbenötigt?

(*) Hinweis :

Es scheint srcdocverwendet werden zu können, um eine Seite nach URL ( Demo ) zu laden , wobei ein Unterrahmen mit dem srcAttribut verwendet wird:

<iframe srcdoc="<iframe src='http://microsoft.com'></iframe>"></iframe>

In den anderen Antworten werden einige oberflächliche Unterschiede aufgeführt, aber es fehlt wirklich die Markierung des Hauptunterschieds, der erklärt, warum Browser / Spezifikationsschreiber im Wesentlichen etwas duplizieren würden, das bereits vorhanden ist:

<iframe src="data:...untrusted content" sandbox /><- Sicher in modernen Browsern, unsicher in älteren Browsern ohne Sandbox-Unterstützung

<iframe srcdoc="...untrusted content" sandbox /><- Sicher in modernen Browsern, sicher (wenn auch nicht funktionsfähig) in älteren Browsern

Diese neue Syntax bietet Inhaltsautoren eine Möglichkeit, ihre Benutzer zu schützen, selbst wenn sie möglicherweise ältere Browser verwenden. Ohne sie würden Inhaltsautoren die Sandbox-Funktion überhaupt nicht verwenden, und sie würde keine Verwendung sehen.

Von MDN:

^1. Der Inhalt der Seite, den der eingebettete Kontext enthalten soll. Es wird erwartet, dass dieses Attribut zusammen mit der Sandbox und nahtlosen Attributen verwendet wird. Wenn ein Browser das Attribut srcdoc unterstützt, überschreibt er den im Attribut src angegebenen Inhalt (falls vorhanden). Wenn ein Browser das srcdoc-Attribut NICHT unterstützt, wird stattdessen die im src-Attribut angegebene Datei angezeigt (falls vorhanden).

Das srcdocAttribut überschreibt also den mit dem srcAttribut eingebetteten Inhalt .

Demo

Außerdem wird das, was Sie über das folgende Snippet sagen, data:text/htmlals Daten-URI bezeichnet und weist Einschränkungen auf.

^2. Daten-URIs dürfen nicht größer als 32.768 Zeichen sein.

^{1. MDN , 2. MSDN}

Iframe mit srcAttribut mit HTML-Inhalt ist domänenübergreifend,

Iframe mit srcDocAttribut mit HTML-Inhalt ist jedoch nicht domänenübergreifend

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:

Nicht erfasster Sicherheitsfehler: Fehler beim Lesen der Eigenschaft "Cookie" aus "Dokument": Cookies sind in den URLs "Daten:" deaktiviert

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.

Ein weiterer bemerkenswerter Unterschied besteht darin, dass srcAttribute mit Daten-URI URI-Prozentcodierungsregeln unterstützen, während srcdocdies 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 ...

In Ihrem Beispiel sind die beiden Formen funktional identisch. Sie können jedoch beide srcund srcdocAttribute verwenden, sodass Nicht-HTML5-Browser die srcVersion verwenden können, während HTML5-Browser die srcdocVersion zusammen mit den Attributen sandboxund verwenden können seamless, die mehr Flexibilität bei der Behandlung eines iFrames bieten.

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.

Der 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