IE Problème: Envoi formulaire à un iframe en utilisant javascript

je tentais de créer un élément iframe en utilisant javascript, comme ceci:IE Problème: Envoi formulaire à un iframe en utilisant javascript

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

Cependant, quand j'ai essayé de soumettre un formulaire en utilisant le 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, iframe est créé, mais n'est pas utilisé.

Source

2010-02-02 Erwin

Vous avez touché un bug in Internet Explorer.

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

Dans IE (avant la version 8 en cours d'exécution en mode standard IE8), cette méthode ne sera pas travailler pour définir l'attribut de nom.

Vous devez utiliser 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');

Source

2010-02-02 02:49:52 scunliffe

+1 bonne info..merci –

Merci scunliffe. Ceci est une information très utile. – Erwin

+1 - dans mon esprit la bonne réponse ici. –

Bienvenue chez SO.

Un problème que j'ai vu dans votre code est que vous n'allez jamais 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 balise <span> pour servir de slot 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>

MISE À JOUR:

Je trouve que cette solution ne fonctionne que dans Firefox. J'ai donc fait quelques expériences. Il semble que si vous définissez l'iframe dans le HTML (au lieu de le générer via JS/DOM) alors 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>

Source

2010-02-02 01:58:55

Salut! Merci pour la réponse. En fait, je n'ai pas inclus dans mon post la partie où iframe est ajouté à un élément div, et l'élément à document.body (using appendChild). Étant donné que l'iframe a déjà été ajouté au corps, le formulaire ne cible toujours pas l'iframe. Mais cela ne se produit que dans IE. – Erwin

@ Erwin, vous avez absolument raison. J'ai expérimenté avec ceci et j'ai mis à jour ma réponse. J'espère que cela aide. –

Cela a fonctionné! Joli. Cependant, j'ai encore des questions non résolues. Quelle aurait pu être la différence?Ne suffit-il pas d'avoir une référence à l'objet formulaire (en utilisant getElementById dans ce cas)? En outre, lorsque j'ai essayé de créer le formulaire en utilisant javascript, au lieu d'avoir un élément de formulaire à l'intérieur du code HTML, le même problème est réapparu. Mais cette fois, la clause if-else pour les implémentations IE/FF ne semble plus fonctionner. Une idée? Mais encore, merci pour la réponse! – Erwin

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

Source

2012-05-16 18:55:39 jceyca

Il est utile d'ajouter un certain type de commentaire avec votre réponse pour expliquer comment votre code aide. – RThomas

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

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

qui fonctionne parce que cette fonction d'assistance détecte HAS_EXTENDED_CREATE_ELEMENT_SYNTAX pour IE, en travaillant autour du bug .name = ….

Source

2014-01-07 18:35:31

IE Problème: Envoi formulaire à un iframe en utilisant javascript

Répondre

Questions connexes