Frage Angeben des Inhalts eines iframe anstelle des src an eine Seite


Ich arbeite gerade an einem Formular, das neben allen normalen Feldern eines Formulars auch Dateieingaben zum Hochladen von Bildern hat, welches onchange das Bild an einen iframe weiterleitet und dann das hochgeladene Bild dynamisch in das Formular mit Feldern lädt, die geändert werden sollen für sie (wie Name und Geo-Lokalisierung). Da ich keine Formulare verschachteln kann, ist der file_input auch in einem iframe enthalten, sodass ich am Ende einen iframe innerhalb eines iframes verwende. So schematisch 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 im iframe ist etwas wie (HTML, Kopf und Körper-Tags ignorieren)

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

Das funktioniert großartig, außer dass es ein paar Sekunden dauert, den ersten iframe zu laden, so dass die Dateieingabe nicht mit dem Rest der Seite geladen wird und visuell nicht ideal ist. Ich könnte das lösen, wenn es möglich wäre, den Iframe-Inhalt anzugeben, ohne eine andere Seite laden zu müssen (angegeben durch 'file_input_url' im ersten iframe).

Meine Frage ist also, gibt es eine Möglichkeit, den Iframe-Inhalt im selben Dokument zu spezifizieren, oder kann es nur mit dem src-Attribut spezifiziert werden, also ist das Laden einer anderen Seite erforderlich?


61
2017-11-16 21:59


Ursprung


Antworten:


Sie können den Inhalt in das iFrame-Dokument schreiben. 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>

74
2017-11-16 22:08



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


26
2017-08-28 20:31



Sie können verwenden data: URL in der 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>

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

HTML in Daten konvertieren: Text / HTML-Link mit JavaScript.


8
2017-07-09 20:22



In Kombination mit dem, was Guffa beschrieben hat, könntest du die Technik verwenden, die in Erklärung von <script type = "text / template"> ... </ script> um das HTML-Dokument in einem speziellen zu speichern script Element (siehe den Link für eine Erklärung, wie das funktioniert). Das ist viel einfacher als das Speichern des HTML-Dokuments in einer Zeichenfolge.


5
2017-09-16 15:16