Problème IE: envoi d'un formulaire à un iframe à l'aide de javascript

J'essayais de créer un élément iframe à l'aide de javascript, de la manière suivante:

var iframe = document.createElement('iframe'); iframe.setAttribute('name', 'frame_x');

Cependant, lorsque j'ai essayé de soumettre un formulaire en utilisant l'iframe nouvellement créé comme cible, IE ouvre une nouvelle fenêtre, au lieu d'utiliser l'iframe.

 form.setAttribute('target', 'frame_x'); form.submit();

Cela fonctionne parfaitement dans Firefox. En outre, l'iframe est créé, mais n'est pas utilisé.

Vous avez frappé un bug dans Internet Explorer .

VOUS NE POUVEZ PAS définir l'attribut de nom de TOUT élément dans IE en utilisant la méthode DOM standard .setAttribute('name', value);

Dans IE (avant la version 8 en mode de mode IE8), cette méthode ne fonctionnera pas pour définir l'attribut de nom.

Vous devez utiliser l'une des options suivantes:

 //A (any browser) var iframe = document.createElement('iframe'); iframe.name = 'frame_x'; //B (only in IE) var iframe = document.createElement('<iframe name="frame_x"/>'); //C (use a JS library that fixes the bug (eg jQuery)) var iframe = $('<iframe name="frame_x"></iframe>'); //D (using jQuery to set the attribute on an existing element) $('iframe:first').attr('name','frame_x');

Bienvenue à SO.

Une des questions que j'ai vues dans votre code est que vous n'êtes jamais en train d'afficher l'iframe. Pour qu'il apparaisse sur la page, vous devez l'insérer dans votre document. Dans mon exemple, je crée une <span> pour servir de fente où l'iframe sera inséré.

Voyez si cela fait ce que vous cherchez.

 <!-- http://stackoverflow.com/questions/2181385/ie-issue-submitting-form-to-an-iframe-using-javascript --> <html> <head> <script type="text/javascript"> function submitFormToIFrame(){ var form=document.getElementById('myform'); form.setAttribute('target', 'frame_x'); form.submit(); } </script> </head> <body> <h1>Hello Erwin!</h1> <form id="myform" name="myform" action="result.html"> <input type="button" value="Submit the Form" onClick="submitFormToIFrame();"> </form> <span id="iframeSlot"> <script type="text/javascript"> var iframe = document.createElement('iframe'); iframe.setAttribute('name', 'frame_x'); document.getElementById('iframeSlot').appendChild(iframe); </script> </span> </body> </html>

METTRE À JOUR:

J'ai trouvé que cette solution fonctionne uniquement dans Firefox. J'ai donc expérimenté. Il semble que si vous définissez l'iframe dans le html (au lieu de le générer via JS / DOM), cela fonctionne. Voici la version qui fonctionne avec IE et Firefox:

 <html> <head> <script type="text/javascript"> function submitFormToIFrame(){ //IE if( document.myform ){ document.myform.setAttribute('target','frame_x'); document.myform.submit(); //FF } else { var form=document.getElementById('myform'); form.setAttribute('target', 'frame_x'); form.submit(); } } </script> </head> <body> <h1>Hello Erwin!</h1> <form id="myform" name="myform" action="result.html" target=""> <input type="button" value="Submit the Form" onClick="submitFormToIFrame();"> </form> <span id="iframeSlot"> <iframe name="frame_x"> </iframe> </span> </body> </html>

 function sendForm(idform){ var nfi = "RunF"+tagRandom(); $("body").append("<iframe name=\""+nfi+"\" id=\""+nfi+"\" class=\"runAgents\" src=\"#\"></iframe>"); $("#"+idform).attr("target",nfi); $("#"+idform).submit(); }

Pour continuer la réponse de @ scunliffe, si vous utilisez Prototype.js:

 var iframe = Element('iframe', {name: 'frame_x'});

Ce qui fonctionne car cette fonction helper détecte HAS_EXTENDED_CREATE_ELEMENT_SYNTAX pour IE, en train de travailler autour du .name = … bug.