35 votes

Problème IE: Soumission du formulaire à un iframe à l'aide de javascript

J'essayais de créer un élément iframe en utilisant javascript, comme ceci:

 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é.

74voto

scunliffe Points 30964

Vous avez atteint un bug dans Internet Explorer.

Vous ne POUVEZ PAS définir le nom de l'attribut de TOUT élément dans IE à l'aide de la norme Méthode DOM .setAttribute('name', value);

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

Vous devez utiliser l'une des opérations 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 (e.g. 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');

7voto

AJ. Points 12912

Bienvenue DONC.

Seul problème que j'ai vu dans votre code, c'est que vous n'êtes jamais en fait de l'affichage de l'iframe. Pour qu'elle apparaissent sur la page, vous devez l'insérer dans votre document. Dans mon exemple, j'ai créer un <span> balise d'agir comme le logement où l'iframe aurez inséré.

Voir si ce n'est 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>

Mise à JOUR:

J'ai trouvé que cette solution ne fonctionne que sous Firefox. J'ai donc fait quelques tests. Il semble que si vous définissez l'iframe dans le code html (au lieu de générer via JS/DOM), alors il 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>

0voto

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

0voto

Jesse Glick Points 3877

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 d'assistance détecte HAS_EXTENDED_CREATE_ELEMENT_SYNTAX pour IE, en contournant le bogue .name = … .

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X