web-dev-qa-db-fra.com

Spécification du contenu d'un iframe au lieu du src sur une page

Je travaille actuellement sur un formulaire qui, en plus de tous les champs normaux d'un formulaire, contient également des entrées de fichier pour télécharger des images. Celui-ci soumet l'image à un iframe, puis charge dinamiquement l'image dans le formulaire avec les champs à modifier. pour eux (comme le nom et la géolocalisation). Étant donné que je ne peux pas imbriquer de formulaires, le paramètre file_input est également contenu dans un iframe. Par conséquent, j'utilise un iframe à l'intérieur d'un iframe. Donc, schématiquement, j'ai quelque chose comme ça:

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

et le html chargé dans l'iframe ressemble à quelque chose comme (en ignorant les balises html, head et body)

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

Cela fonctionne très bien, sauf que le chargement de la première iframe prend quelques secondes, de sorte que l'entrée de fichier ne se charge pas avec le reste de la page et n'est visuellement pas idéale. Je pourrais résoudre ce problème s'il était possible de spécifier le contenu de l'iframe sans avoir à charger une autre page (spécifiée par 'file_input_url' dans la première iframe).

Ma question est donc la suivante: existe-t-il un moyen de spécifier le contenu de l’iframe dans le même document, ou peut-il seulement être spécifié avec l’attribut src, de sorte que le chargement d’une autre page est requis?

htmliframe
75
orlox

Vous pouvez écrire le contenu dans le document iframe. Exemple:

<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>
86
Guffa

iframe supporte maintenant srcdoc qui peut être utilisé pour spécifier le contenu HTML de la page à afficher dans le cadre en ligne.

33
Ayush Gupta

Vous pouvez utiliser data: _ URL dans le 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>

Différence entre srcdoc = “…” et src = “data: text/html,…” dans une iframe .

Convertir HTML en données: lien texte/html en utilisant JavaScript .

17
user

En combinaison avec ce que Guffa a décrit, vous pouvez utiliser la technique décrite dans Explication de <script type = "text/template"> ... </ script> pour stocker le document HTML dans un fichier script element (voir le lien pour une explication sur le fonctionnement). C'est beaucoup plus facile que de stocker le document HTML dans une chaîne.

5
ximo