Angeben des Inhalts eines Iframes anstelle des src-Attributs für eine Seite

88

Ich arbeite derzeit an einem Formular, das einige Dateieingaben zum Hochladen von Bildern enthält. onchange()Für diese Eingaben gibt es ein Ereignis, bei dem die Bilder an ein iframegesendet und dann die hochgeladenen Bilder dynamisch in das Formular geladen werden, wobei Felder für sie geändert werden müssen (wie Name und Geolokalisierung ).

Da ich Formulare nicht verschachteln kann, file_inputist das auch in einem enthalten iframe. Am Ende benutze ich ein iframeInneres eines anderen iframe. Also habe ich so etwas:

<form>
<!-- LOTS OF FIELDS!! -->
<iframe src="file_input_url">
<!-- iframe which loads a page of a form with a file input-->
</iframe>
</form>

und das HTML geladen in dem iframeist so etwas wie ( mit Ausnahme der html, headund bodyTags)

<form target="upload_iframe">
<input type="file" onchange="this.form.submit()">
</form>
<iframe name="upload_iframe"></iframe>

Dies funktioniert hervorragend, mit Ausnahme der Tatsache, dass das Laden des ersten einige Sekunden dauert iframe, sodass die Dateieingabe nicht mit dem Rest der Seite geladen wird. Dies ist optisch nicht ideal. Ich könnte es lösen, wenn ich den iframeInhalt angeben könnte, ohne eine andere Seite laden zu müssen (angegeben durch file_input_urlin der ersten iframe).

Gibt es eine Möglichkeit, den iframeInhalt im selben Dokument anzugeben , oder kann er nur mit dem srcAttribut angegeben werden, das das Laden einer anderen Seite erfordert?

html iframe Orlox
quelle
Das Laden dieses Iframes sollte nicht "ein paar Sekunden" dauern. Ich würde erwarten, dass es eher eine Zehntel Millisekunde plus die "Zeit zum Beißen" ist (die auch Millisekunden sein sollte). Sie sollten untersuchen, was die Verzögerung verursacht - wahrscheinlich stimmt etwas mit Ihrem Server nicht.
Abhi Beckert

Antworten:

95

Sie können .write()den Inhalt in das Iframe-Dokument einfügen. Beispiel:

<iframe id="FileFrame" src="about:blank"></iframe>

<script type="text/javascript">
   var doc = document.getElementById('FileFrame').contentWindow.document;
   doc.open();
   doc.write('<html><head><title></title></head><body>Hello world.</body></html>');
   doc.close();
</script>
Guffa
quelle
1
Hätte über diese Möglichkeit nachgedacht, ist das HTML, das in den Iframe geladen werden muss, komplex, und die vollständige Verarbeitung in Javascript, um es in den Iframe zu schreiben, würde die Implementierung zu sehr verdecken (bis zu dem Punkt, den ich bevorzuge Lass es so wie es ist).
Orlox
2
@orlox: Holen Sie sich Ihre Inhalte mit Ajax vom Server und injizieren Sie sie. Wenn Sie diesen Weg nicht gehen möchten, diverstellen Sie mit Ihrem Inhalt ein verstecktes Element und platzieren Sie den Inhalt iframezwischen <body>und </body>.
Stapel
11
Je mehr ich über Iframes-Einschränkungen erfahre, desto mehr hasse ich sie
John Magnolia
1
Wie entkomme ich mit dieser Methode einfachen Anführungszeichen? Einige von ihnen sind HTML-wichtig (z. B. class = 'example'), andere sind CSS-wichtig (z. B. Schriftfamilie: 'Verdana';) und andere sind inhaltlich (z. B. George O'Malley).
Dan Bechard
2
@Dan: Um einen Wert zu umgehen, der in einer durch Apostroph getrennten JavaScript-Zeichenfolge verwendet werden soll, müssen Sie zuerst Backslashes und dann Apostrophe maskieren. Verwenden Sie beispielsweise C #, um eine Zeichenfolge im Code auszugeben : doc.write('<%= html.Replace("\\", "\\\\").Replace("'", "\\'") %>');.
Guffa
36

iframe unterstützt jetzt srcdoc, mit dem der HTML-Inhalt der Seite angegeben werden kann, die im Inline-Frame angezeigt werden soll.

Ayush Gupta
quelle
2
IE unterstützt dieses Recht nicht, aber Sie können caniuse auf den neuesten Status überprüfen .
Ayush Gupta
Dokumentation zu MDN
Benoit Blanchon
22

Sie können die data:URL verwenden in src:

var html = 'Hello from <img src="http://stackoverflow.com/favicon.ico" alt="SO">';
var iframe = document.querySelector('iframe');
iframe.src = 'data:text/html,' + encodeURIComponent(html);
<iframe></iframe>
Erweitern Sie das Snippet

Unterschied zwischen srcdoc = "..." und src = "data: text / html, ..." in einem Iframe .

Konvertieren Sie HTML in Daten: Text / HTML-Link mit JavaScript .

Benutzer
quelle
1
Sie benötigen nicht einmal JavaScript: Das srcAttribut kann inline angegeben werden, wenn es maskiert wird, z. B. rawurlencodein PHP:<iframe src="<?php echo htmlspecialchars('data:text/html,' . rawurlencode($content)); ?>"></iframe>
Jake
Microsoft hat die Unterstützung dafür fast zeitgleich mit der Unterstützung hinzugefügt srcdoc, und dies srcdocist der bessere Weg, dies zu tun. Daten-URLs werden nur für Bilder und CSS weitgehend unterstützt - meines Wissens unterstützt keine Version von Internet Explorer sie in einem Iframe.
Abhi Beckert
5

In Kombination mit dem, was Guffa beschrieben hat, können Sie die unter Erläuterung von <script type = "text / template"> ... </ script> beschriebene Technik verwenden , um das HTML-Dokument in einem speziellen scriptElement zu speichern (eine Erläuterung finden Sie unter dem Link wie das funktioniert). Das ist viel einfacher als das Speichern des HTML-Dokuments in einer Zeichenfolge.

ximo
quelle
Auf den zweiten Blick würde das für ein vollständiges HTML-Dokument nicht sehr gut funktionieren. Stichworte wie <html>, <body>, <script>würden verwirren nur den Browser, das Rendern des Dokuments zu brechen.
Ximo
Dies scheint kein Problem zu sein. Die HTML-Tags in Skripten werden ignoriert.
HBP
Du hast recht :) Ich hatte die Technik noch nicht ausprobiert, als ich das schrieb, und muss diese Annahme von irgendwoher aufgegriffen haben. Ich fand später heraus, dass alles in einem <script>Tag vom Browser ignoriert wird. Danke, dass Sie mich korrigiert haben!
Ximo